[ERR_REQUIRE_ESM]: Must use import to load ES require() of ES modules is not supported

[wocwin]

[JamieCurnow]

@wocwin Could you create a minimal reproduction please? I've installed in a fresh vue project with vite and with webpack and all seems to be working.

[sthwang-metal]

I ran into a similar issue when using vitest and vue-test-utils to mount a component (using composition API) in a test that has import useClipboard from "vue-clipboard3" :

ReferenceError: exports is not defined in ES module scope This file is being treated as an ES module because it has a '.js' file extension and '/Users/sthwang/github/governor/governor-ui/node_modules/vue-clipboard3/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.

It seems that for some reason my vitest loads both the cjs and esm distribution when it should use the esm.

Changing this library's package.json to use conditional exports fixes my issue as seen here https://nodejs.org/api/packages.html#approach-1-use-an-es-module-wrapper.

ie.

  "exports": {
    "import": "./dist/esm/index.js",
    "require": "./dist/cjs/index.js"
  },

An alternative fix I have is to include resolve: { mainFields: ['module'] } in my vitest.config.ts ie.

defineConfig({
  ...
  resolve: {
    mainFields: ['module']
  }
  ...
})

This is probably likely to how my configs are setup, but hopefully this is useful to anyone running into the same issue.

[abnormalboy]

I ran into a similar issue when using vitest and vue-test-utils to mount a component (using composition API) in a test that has import useClipboard from "vue-clipboard3" :

ReferenceError: exports is not defined in ES module scope This file is being treated as an ES module because it has a '.js' file extension and '/Users/sthwang/github/governor/governor-ui/node_modules/vue-clipboard3/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.

It seems that for some reason my vitest loads both the cjs and esm distribution when it should use the esm.

Changing this library's package.json to use conditional exports fixes my issue as seen here https://nodejs.org/api/packages.html#approach-1-use-an-es-module-wrapper.

ie.

  "exports": {
    "import": "./dist/esm/index.js",
    "require": "./dist/cjs/index.js"
  },

An alternative fix I have is to include resolve: { mainFields: ['module'] } in my vitest.config.ts ie.

defineConfig({
  ...
  resolve: {
    mainFields: ['module']
  }
  ...
})

This is probably likely to how my configs are setup, but hopefully this is useful to anyone running into the same issue.

I have encountered the same problem with vtu and your method is very effective