SyntaxError: The requested module '/node_modules/lodash/assignWith.js?v=85e602f8' does not provide an export named 'default'

[aladdin-add]

help wanted! 🙌

I was using vite v4 to develop a react app. It was working before, but after upgrading a certain dependency it started reporting this error, and upgrade to latest(v4.4.9) does not help.

// the lodash was installed(cjs).

vite config:

export default defineConfig({
  plugins: [
    react(),
    qiankun('lithium', { useDevMode }),
  ],
  optimizeDeps: {
    include: ['classnames', 'lodash'],
  },

I was under the impression that it's allowed to import cjs in esm module (even in vite), but for some reason this one doesn't load successfully.

[aladdin-add]

repro: https://github.com/aladdin-add/repros/tree/vite-14062

[samhirtarif]

@aladdin-add - To use commonJS you would need a commonJS plugin

The following actions on your reproduction repo will get it to work (I have already tried it)

First install a commonjs plugin called @originjs/vite-plugin-commonjs

npm i -D @originjs/vite-plugin-commonjs

Then add a vite.config.ts file with the following code

import { defineConfig } from 'vite';
import { viteCommonjs } from '@originjs/vite-plugin-commonjs'

export default defineConfig({

  plugins: [  
    viteCommonjs(),
  ]
});

And your problem would be solved.

PS: Feel free to mark this comment as the answer if it solves your issue.

[samhirtarif]

SInce you already have a vite.config.ts in your actual project, just add the viteCommonjs() plugin to the list of plugins there

[aladdin-add]

will try, thanks! is that to say: cjs is no longer official supported?

[samhirtarif]

To the best of my knowledge vite has always needed a plugin to be able to use cjs.

[sapphi-red]

In your reproduction, foo is a linked dependency and needs to be explicitly added to optimizeDeps.include.
https://vitejs.dev/config/dep-optimization-options.html#optimizedeps-include

import { defineConfig } from 'vite'

export default defineConfig({
  optimizeDeps: {
    include: ['foo/mod.js']
  }
})

Maybe you need to add aDirectDependency > lodash but I can't say more without a reproduction.

[pavinduLakshan]

Thanks, this worked for me. In my case, the SDK i was using was in the monorepo root, so it wasn't included in the app by default.

[SimonEast]

Is it still true that Vite needs a plugin to support CommonJS? And if so, does the plugin need to be enabled manually, or is it active by default?

The docs seem to imply that CommonJS is supported, under Dependency Pre-Bundling:

CommonJS and UMD compatibility: During development, Vite's dev serves all code as native ESM. Therefore, Vite must convert dependencies that are shipped as CommonJS or UMD into ESM first.

When converting CommonJS dependencies, Vite performs smart import analysis so that named imports to CommonJS modules will work as expected even if the exports are dynamically assigned (e.g. React): ...

[SimonEast]

I was a bit confused as last night I could not get a CommonJS module to load properly, even after trying several different methods. After closing my environment and reopening it again a day later, it seems to work fine. So perhaps it just needed a restart. 😣 Caused me to question whether Vite fully supported CommonJS modules, but it seems to do so fine, without any additional plugins.