'Trans is not defined' when doing a build for production

[Nut]

Hi all, currently I'm trying this plugin together with vite + react + ts. When I'm starting my app as a dev server via vite dev everything works fine. But when I'm doing a production build via vite build and start the the production build locally then I'm getting a ReferenceError: Trans is not defined on the console:

It seems like that the transformation does not happen and Trans from @lingui/react is missing when doing a build for production.

Does anyone have any idea if I am doing something wrong?

My current setup is:

.linguirc

{
   "locales": ["en", "de", "lb", "fr", "pt", "it", "nl", "ru"],
   "sourceLocale": "en",
   "compileNamespace": "ts",
   "catalogs": [{
      "path": "src/locales/{locale}/messages",
      "include": ["src"],
      "exclude": ["**/node_modules/**"]
   }],
   "format": "po",
   "extractBabelOptions": {
      "presets": [
         "@babel/preset-typescript",
         [
           "@babel/preset-react",
           {
             "runtime": "automatic",
             "importSource": "react"
           }
         ]
       ]
    }
}

package.json

"dependencies": {
    // ...
    "@lingui/macro": "3.17.1",
    "@lingui/react": "3.17.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
  },
  "devDependencies": {
    //...
    "@babel/core": "7.20.12",
    "@babel/eslint-parser": "7.19.1",
    "@babel/plugin-syntax-flow": "7.18.6",
    "@babel/plugin-syntax-jsx": "7.18.6",
    "@babel/plugin-transform-react-jsx": "7.20.13",
    "@babel/preset-react": "7.18.6",
    "@babel/preset-typescript": "7.18.6",
    "@lingui/cli": "3.17.1",
    "@lingui/swc-plugin": "0.2.0",
    "@lingui/vite-plugin": "3.17.1",
    "@vitejs/plugin-react-swc": "3.1.0",
    "babel-eslint": "10.1.0",
    "babel-plugin-macros": "3.1.0",
    "typescript": "4.9.5",
    "vite": "4.1.2"
  }

vite.config.ts

import lingui from "@lingui/vite-plugin";
import react from "@vitejs/plugin-react-swc";
import { defineConfig } from "vite";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    lingui(),
    react({
      plugins: [
        [
          "@lingui/swc-plugin",
          {
            runtimeModules: {
              i18n: ["@lingui/core", "i18n"],
              trans: ["@lingui/react", "Trans"],
            },
          },
        ],
      ],
    }),
  ],
  server: {
    port: 3000,
  },
  resolve: {
    alias: {
      src: "/src",
    },
  },
});

[timofei-iatsenko]

Aa far as i remember Vite uses SWC for development builds and babel for production. You need to setup babel macro plugin also.

[timofei-iatsenko]

You also don't need runtimeModules in your config if you're not going to override defaults.

[timofei-iatsenko]

Uses esbuild during build, but replaces Babel with SWC during development. For big projects that don't require non-standard React extensions, cold start and Hot Module Replacement (HMR) can be significantly faster.

It's even worse, it uses just esbuild

[timofei-iatsenko]

Interesting, the line from readme says if you pass plugins it:

Use SWC plugins. Enable SWC at build time.

Does it mean if you pass plugins it enables SWC for both development and build? If yes, that means it should work.

Could you also show your input code snippet? Looks like imported treated as import only and might be deleted by transpiler.

[Nut]

@thekip Thanks a lot for your support! I think SWC is enabled when passing plugins https://github.com/vitejs/vite-plugin-react-swc/blob/main/src/index.ts#L120
But the readme's are actually a bit confusing.

You mean by input code this here?

import { Trans } from "@lingui/macro";
// ...

const FilterDialog = ({ open, onClose }: FilterDialogProps) => {
  // ...

  return (
    <Dialog
      open={open}
      onClose={onClose}
      fullScreen={fullScreen}
      fullWidth={true}
    >
      <DialogTitle>Filter</DialogTitle>
      <DialogContent>
        <FilterContent
          onChangeAttributes={handleOnChangeAttributes}
          onChangeEquipment={handleOnChangeEquipment}
          filterType={getFilterType(pathname)}
        />
      </DialogContent>
      <DialogActions>
        <Button autoFocus onClick={handleOnReset}>
          <FontAwesomeIcon icon={faTrash} size="lg" />
        </Button>
        <Button onClick={onClose} autoFocus>
          <Trans>Apply</Trans>
        </Button>
      </DialogActions>
    </Dialog>
  );
};

export { FilterDialog };

[Nut]

After updating @vitejs/plugin-react-swc to the latest version (3.2.0) everything is now working as expected.