Error [ERR_REQUIRE_ESM]: lodash-es

[alveshelio]

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 of vite-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

[Wishez]

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 of vite-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?:)

[agustif]

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

[gamegee]

Same issue here, any updates ? :)

[rosskevin]

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.

[rosskevin]

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:

1. Remove cjs from this package and make a note in the README
2. Let @agustif maintain the fork/package that just makes it CJS runtime compatible (very small change)
3. Use this README to point to @agustif's maintained package for CJS.

Thoughts? I am open for discussion - but this must work for ESM runtimes first and foremost.

[rosskevin]

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 andlodash-es` for ESM. See lodash/lodash#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?

[rosskevin]

I attempted the replacement 047c5a3

I'll try in ESM first (tests already pass in ESM so I assume it is all good)

[rosskevin]

Woohoo! ESM confirm works for 2.0.3--canary.10.047c5a3.0. I need a CJS tester to confirm.

[pantajoe]

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:

• Either users specify "module": true in their package.json, so no cjs is used anywhere. I totally get that that's not feasible for everyone.
• But, fortunately, vite added support for mts and mjs extensions for the vite config file: feat: supports cts and mts config vitejs/vite#8729

The 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!

[rosskevin]

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.

[pantajoe]

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 😅

[rosskevin]

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).