Vitest test fails. require() of ES modules is not supported

[JacobMelnick]

Hey Y'all, I am currently migrating one of my works repos from CRA and jest to vite/vitest. The migration to vite was no issue, however, with vitest I am having an issue that is causing around 35 tests to fail.

The error is "Must use import to load ES Module." Require() of ES modules is not supported.

It says its coming from a few modules in my node_modules, specifically, lodash-es, @mapbox, and @deck.gl.

I have been stuck on this for a week now with no avail. I am aware that vitest is ESM first, and cant use CJS, I just cant find a way to resolve these requires() to imports from these modules. If anyone has any ideas on how to fix this please reach out!

Here is my setup.

vite.config.ts

import { defineConfig } from 'vite'
import { vitest } from 'vitest/config'

plugins: [react(), viteTsconfigPaths()],
server: {
        open: true,
        host: true,
        port: 300
},
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: './src/setupTest.ts'
  },
  build: {
    outDir: 'build'
  },
resolve: {
           alias: {
              '@': path.resolve(__dirname, ./src),
               path: 'path-browserify'
      },
},
optimizeDeps: {
       esbuildOptions: {
                define: {
                      global: 'globalThis'
             }
       }
     }
})```

[spanwair]

Failing with same issue, already spent 2 full days looking for solution. Part solution:

    test: {
      deps: {
        optimizer: {
          web: {
            include: ['@react-leaflet/core']
          }
        }
      },
      }

but again than I am stuck to import .css to it. Crazy err. Anyone find some solution for this please.

[spanwair]

one more try on this with fail as well. Transforming commonjs into ESM using esbuild options:

optimizeDeps: {
      exclude: ['+*.jsx'],
      esbuildOptions: {
        plugins: [
          {
            name: 'css',
            setup(build) {
              let escape = (text) => `^${text.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&')}$`;
              let filter = new RegExp(['react-leaflet-cluster'].map(escape).join('|'));
              build.onResolve({ filter: /.*/, namespace: 'external' }, (args) => ({
                path: args.path,
                external: true
              }));
              build.onResolve({ filter }, (args) => ({
                path: args.path,
                namespace: 'external'
              }));
              build.onLoad({ filter: /.*/, namespace: 'external' }, (args) => ({
                contents: `export * from ${JSON.stringify(args.path)}`
              }));
            }
          }
        ]
      }
    },

[marshal-f]

Did you ever find a solution to this? I'm running into the same issue with react-leaflet too.

[nuksuli]

If you are still looking for answer, I found out that you need to the test pool to vmThreads or vmFork to be able to use the Vitest built-in css transformer.

I hope this helps.

[alemor10]

bump having the same issue as well

[alemor10]

Hey Y'all, I am currently migrating one of my works repos from CRA and jest to vite/vitest. The migration to vite was no issue, however, with vitest I am having an issue that is causing around 35 tests to fail.

The error is "Must use import to load ES Module." Require() of ES modules is not supported.

It says its coming from a few modules in my node_modules, specifically, lodash-es, @mapbox, and @deck.gl.

I have been stuck on this for a week now with no avail. I am aware that vitest is ESM first, and cant use CJS, I just cant find a way to resolve these requires() to imports from these modules. If anyone has any ideas on how to fix this please reach out!

Here is my setup.

vite.config.ts

import { defineConfig } from 'vite' import { vitest } from 'vitest/config'

plugins: [react(), viteTsconfigPaths()],
server: {
        open: true,
        host: true,
        port: 300
},
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: './src/setupTest.ts'
  },
  build: {
    outDir: 'build'
  },
resolve: {
           alias: {
              '@': path.resolve(__dirname, ./src),
               path: 'path-browserify'
      },
},
optimizeDeps: {
       esbuildOptions: {
                define: {
                      global: 'globalThis'
             }
       }
     }
})```

were u able to solve this?

[shirecoding]

im having the same issues as well

[rwilliams3088]

Same issue. @antd library is importing lodash and causing this...

[kiwikencox]

Same issue. @antd library is importing lodash and causing this...

Had the same issue. Added all the AntD Pro es files to the Vitest alias's and it started working.
In vite.config.ts

 test: {
    alias: [
      { find: '@ant-design/pro-card', replacement: '@ant-design/pro-card/es/index.js' },
      { find: '@ant-design/pro-components', replacement: '@ant-design/pro-components/es/index.js' },
      { find: '@ant-design/pro-descriptions', replacement: '@ant-design/pro-descriptions/es/index.js' },
      { find: '@ant-design/pro-field', replacement: '@ant-design/pro-field/es/index.js' },
      { find: '@ant-design/pro-form', replacement: '@ant-design/pro-form/es/index.js' },
      { find: '@ant-design/pro-layout', replacement: '@ant-design/pro-layout/es/index.js' },
      { find: '@ant-design/pro-list', replacement: '@ant-design/pro-list/es/index.js' },
      { find: '@ant-design/pro-provider', replacement: '@ant-design/pro-provider/es/index.js' },
      { find: '@ant-design/pro-skeleton', replacement: '@ant-design/pro-skeleton/es/index.js' },
      { find: '@ant-design/pro-table', replacement: '@ant-design/pro-table/es/index.js' },
      { find: '@ant-design/pro-utils', replacement: '@ant-design/pro-utils/es/index.js' },
    ],

[zepumph]

I had this exact problem running with node versions 22.11 and 21.7, and found that upgrading to node version 22.20 fixed this issue for me.

[Yohannfra]

Thank you !

I have been stuck on this all day and just upgrading node to 22.20 fixed the issue 👍

[linonetwo]

Wow, it works. Why only upgrade nodejs mid-version will solve such a horrible problem.

[akademy]

Life saver. (About to fall into *.config.js hell...)

[PavloAvdyeyev-Ki]

works for me also, thanks!

[Justin-Ang-Aderant]

Thank you sir 😄, was stuck on this all day today - upgrading to 22.20 resolved this for me as well

[arajay]

I just had to add type: "module" to package.json as indicated by the docs