Closed alveshelio closed 1 year ago
Hi,
i'm trying to use this plugin in my project and I've followed the instructions of the plugin. I'm using
vite
version 4.0.1 and I've installed latest version ofvite-plugin-i18next-loader
which is 2.0.2.This is my
vite.config.ts
file:import react from '@vitejs/plugin-react'; import { resolve } from 'path'; import { defineConfig } from 'vite'; import i18nextLoader from 'vite-plugin-i18next-loader'; import mkcert from 'vite-plugin-mkcert'; import svgrPlugin from 'vite-plugin-svgr'; import viteTsconfigPaths from 'vite-tsconfig-paths'; import * as baseTheme from './src/styles/baseTheme.json'; export default defineConfig({ server: { https: true, port: 3000, open: true, }, build: { outDir: 'build', }, css: { preprocessorOptions: { less: { modifyVars: { // Color Palettes '@blue-1': baseTheme.colorPalettes.daybreakBlue['blue-1'], ... }, javascriptEnabled: true, }, }, }, plugins: [ react(), viteTsconfigPaths(), mkcert(), svgrPlugin(), i18nextLoader({ paths: ['./src/locales/en'], }), ], });
When I try to start my project with
vite
I get this error:failed to load config from
./vite.config.ts
error when starting dev server: Error [ERR_REQUIRE_ESM]: require() of ES Module /node_modules/lodash-es/lodash.js from /node_modules/vite-plugin-i18next-loader/dist/index.cjs not supported. Instead change the require of lodash.js in /node_modules/vite-plugin-i18next-loader/dist/index.cjs to a dynamic import() which is available in all CommonJS modules. at Object._require.extensions. [as .js] (file:///node_modules/vite/dist/node/chunks/dep-5605cfa4.js:63157:17) at Object. (/node_modules/vite-plugin-i18next-loader/dist/index.cjs:1:666) at Object._require.extensions. [as .js] (file://node_modules/vite/dist/node/chunks/dep-5605cfa4.js:63157:17) at Object. (/vite.config.ts:35:49) at Object._require.extensions. [as .js] (file://node_modules/vite/dist/node/chunks/dep-5605cfa4.js:63154:24) at loadConfigFromBundledFile (file://node_modules/vite/dist/node/chunks/dep-5605cfa4.js:63162:21) at loadConfigFromFile (file://node_modules/vite/dist/node/chunks/dep-5605cfa4.js:63020:34) at async resolveConfig (file://node_modules/vite/dist/node/chunks/dep-5605cfa4.js:62643:28) at async createServer (file://node_modules/vite/dist/node/chunks/dep-5605cfa4.js:61943:20) at async CAC. (file://node_modules/vite/dist/node/cli.js:707:24)Thank you
Hi, have you solved the problem?:)
Hi, have you solved the problem?:)
Hey. Not who you where asking but I did open a PR with a fix requiring lodash instead of lodash-es
Published it on npm with -cjs suffix on the name
In case you still looking for a fix
Same issue here, any updates ? :)
I have PR'd a fix in #10 - it contains a canary release to be tested. If some of you would set your version to the canary and try it out I'd appreciate it. I need to do the same with my ESM setup. Please comment in #10.
Ok, so we have a problem.
We (AlienFast) use an ESM only project downstream and the attempted switch from lodash-es -> lodash
in #10 now makes our downstream executions fail (but likely users in this issue would probably have success with that canary release). AlienFast wants to move forward with our packages and we put in a bunch of work to move on to ESM-only for both tooling and runtime packages. We don't want to move backwards into that ambiguous place of trying to be between the two again.
I'm not sure what to do for CJS users...if someone has an Idea please let me know!
Without a good runtime solution, I'm going to remove the CJS release from our package. 😞
The only option I see at this point is to:
Thoughts? I am open for discussion - but this must work for ESM runtimes first and foremost.
One alternative, so that this is both ESM and CJS compatible is to replace the lodash
dependency altogether. The problem with lodash is that instead of upgrading to a modern exports
definition in the package.json, it instead continues to use two different named packages
lodashfor CJS and
lodash-es` for ESM. See https://github.com/lodash/lodash/issues/5107
If someone wants to PR the (deep) merge
and set
function replacements, we can attempt this as a single codebase with two exports as I originally intended. I checked the other runtime dependencies and they all look compatible - except maybe glob-all - but it looks like it will go both ways.
Any takers?
I attempted the replacement https://github.com/alienfast/vite-plugin-i18next-loader/pull/10/commits/047c5a309a1a9637ad78eaa11af7515927da0bb5
I'll try in ESM first (tests already pass in ESM so I assume it is all good)
Woohoo! ESM confirm works for 2.0.3--canary.10.047c5a3.0
. I need a CJS tester to confirm.
Hi, I had the same problem, thanks @rosskevin for attempting a fix, but I believe that this is not necessary. You can indeed keep the dot-prop
package as a replacement for lodash-es
, but sindresorhus has ESM-only packages, so this will not work with cjs.
There are two possible solutions for this:
"module": true
in their package.json
, so no cjs is used anywhere. I totally get that that's not feasible for everyone.mts
and mjs
extensions for the vite config file: https://github.com/vitejs/vite/pull/8729The latter fix helped in my case. Just rename your vite.config.{t,j}s
to vite.config.m{t,j}s
, and you should be good to go!
Damn, I thought I checked dot-prop for a cjs distributable! My haste when I thought I could do both!
Interesting note on the vite config extensions.
@pantajoe I have been using "module": true
and js, cjs
respectively in the dist
for everything. Has a consensus finally been reached (or is there trending sentiment) to use mjs, js
now? It's not a big deal either way to me, I'd prefer to go with the flow.
For me, it seems it's best practice to use "type": "module"
(for instance look at the vitesse template from antfu) and ts or js extensions for the config. So, I assume for people who cannot migrate to pure ESM have to resort to mts or mjs for their config if they resort to ESM plugins.
Also, in my personal opinion, I'd say ESM is to be preferred to CJS and since vite has a "compatibility" option with mjs, there is no reason to support a cjs plugin 😅
I'm going to close this since there is an easy compatibility workaround mentioned by @pantajoe above:
Just rename your vite.config.{t,j}s to vite.config.m{t,j}s, and you should be good to go!
Adding m
to your file extension seems to be far more preferable to me than to try and get a cjs package working (which I also won't use).
Hi,
i'm trying to use this plugin in my project and I've followed the instructions of the plugin. I'm using
vite
version 4.0.1 and I've installed latest version ofvite-plugin-i18next-loader
which is 2.0.2.This is my
vite.config.ts
file:When I try to start my project with
vite
I get this error:failed to load config from [as .js] (file:///node_modules/vite/dist/node/chunks/dep-5605cfa4.js:63157:17)
at Object. (/node_modules/vite-plugin-i18next-loader/dist/index.cjs:1:666)
at Object._require.extensions. [as .js] (file://node_modules/vite/dist/node/chunks/dep-5605cfa4.js:63157:17)
at Object. (/vite.config.ts:35:49)
at Object._require.extensions. [as .js] (file://node_modules/vite/dist/node/chunks/dep-5605cfa4.js:63154:24)
at loadConfigFromBundledFile (file://node_modules/vite/dist/node/chunks/dep-5605cfa4.js:63162:21)
at loadConfigFromFile (file://node_modules/vite/dist/node/chunks/dep-5605cfa4.js:63020:34)
at async resolveConfig (file://node_modules/vite/dist/node/chunks/dep-5605cfa4.js:62643:28)
at async createServer (file://node_modules/vite/dist/node/chunks/dep-5605cfa4.js:61943:20)
at async CAC. (file://node_modules/vite/dist/node/cli.js:707:24)
./vite.config.ts
error when starting dev server: Error [ERR_REQUIRE_ESM]: require() of ES Module /node_modules/lodash-es/lodash.js from /node_modules/vite-plugin-i18next-loader/dist/index.cjs not supported. Instead change the require of lodash.js in /node_modules/vite-plugin-i18next-loader/dist/index.cjs to a dynamic import() which is available in all CommonJS modules. at Object._require.extensions.Thank you