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' },
    ],