Vite plugin -> lingui is not a function in new Vite + React + TS project

[sven-meyer-wetter-com]

Describe the bug
I'm trying to get the new vite plugin to work. Babel seems to be setup correctly, extraction works. But when starting the vite dev server, I always get an error saying "lingui is not a function". I followed the docs how to setup and use the vite plugin.

I didn't found an example project how to configure all of this. Is the error maybe caused by a wrong tsconfig configuration?

To Reproduce
I've created an example project on Stackblitz to show the error. It's based on the official Vite + React + TS playground Stackblitz from here (https://vite.new/react-ts).

https://stackblitz.com/edit/vitejs-vite-ojqs39

Expected behavior
No error message, vite dev server is started sucessfully.

Additional context

• jsLingui version 3.17.1
• Babel version 7.20.12

[timofei-iatsenko]

That simply because @lingui/vite-plugin is build for commonjs, where default Vite setup using ESM modules. Remove "type: module" from package.json as a temporary workaround to fix that.

https://stackblitz.com/edit/vitejs-vite-bntf5b?file=package.json

We need to ship @lingui/vite-plugin package in dual format.

[andrii-bodnar]

Hi @sven-meyer-wetter-com, the fix is already in the main branch, could you please confirm that it fixes your issue? Please follow the Using development version in your project guideline to test it. Thank you!

[andrii-bodnar]

@thekip just tried it with the fix locally (on the sample project from the description):

npm run dev

> vite-react-typescript-starter@0.0.0 dev
> vite

(node:16015) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
failed to load config from /Users/andrii/Downloads/vitejs-vite-ojqs39/vite.config.ts
error when starting dev server:
/Users/andrii/Downloads/vitejs-vite-ojqs39/node_modules/@lingui/vite-plugin/build/esm/index.js:1
import { getConfig } from "@lingui/conf";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1033:15)
    at Module._compile (node:internal/modules/cjs/loader:1069:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:170:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:198:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:385:24)

[timofei-iatsenko]

The "default" export/import is harmful when it comes to ESM/Commonjs interop. if they asked me, I would generally remove it from the standard and discourage everyone of using it. But we have what we have. And other native vite plugins implemented with a default export.

(node:16015) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.

Interesting, it's pointing that you don't have ESM modules enabled in your project. But the StackBlitz example has "type": "module" in the package.json.

I changed the pipeline to produce exactly the same output as original's vite-plugin-react produces. So in general it should work. I will take a look.

[andrii-bodnar]

Interesting, it's pointing that you don't have ESM modules enabled in your project

yes, I checked this, and locally I definitely have this property

[timofei-iatsenko]

@sven-meyer-wetter-com please use a named export in version 3.17.2