Uncaught Error: Dynamic require of "xxx/main.scss" is not supported, when ESM package import commonjs module

[ayangliayangli]

Describe the bug

error log in browser console panel:
Uncaught Error: Dynamic require of "/Users/ligfee/Documents/code/self/vite.d/demo.d/vite-issue-dep-dep/node_modules/@alifd/next/lib/icon/main.scss" is not supported

code analysis:
App import @yangfee/dep-1-demo, this package is ESM
@yangfee/dep-1-demo import a commonjs module

// filename: node_modules/@yangfee/dep-1-demo/lib/CascaderSelect.js

// not import { Cascader } from @alifd/next;
// import from a module, not package, vite can not handle this scene
import Cascader from '@alifd/next/lib/cascader-select'; // this is commonjs module
import '@alifd/next/lib/cascader-select/style';

Reproduction

minimal project(github)

System Info

System:
    OS: macOS 11.2.1
    CPU: (8) x64 Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz
    Memory: 72.98 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.15.5 - ~/.nvm/versions/node/v14.15.5/bin/node
    Yarn: 1.22.10 - ~/.nvm/versions/node/v14.15.5/bin/yarn
    npm: 6.14.11 - ~/.nvm/versions/node/v14.15.5/bin/npm
  Browsers:
    Chrome: 94.0.4606.81
    Safari: 14.0.3
  npmPackages:
    @vitejs/plugin-react: ^1.0.0 => 1.0.4
    vite: ^2.6.4 => 2.6.7

Used Package Manager

yarn

Logs

// there is no error on vite --debug
vite:spa-fallback Rewriting GET / to /index.html +9s
  vite:time 2.69ms /index.html +8s
  vite:cache [memory] /@vite/client +8s
  vite:time 3.74ms /@vite/client +51ms
  vite:cache [memory] /src/main.tsx +3ms
  vite:time 1.56ms /src/main.tsx +3ms
  vite:cache [memory] /@react-refresh +35ms
  vite:time 0.93ms /@react-refresh +34ms
  vite:cache [memory] /node_modules/vite/dist/client/env.mjs +14ms
  vite:time 1.72ms /node_modules/vite/dist/client/env.mjs +14ms
  vite:cache [memory] /node_modules/.vite/react.js?v=fdf86eb2 +4ms
  vite:time 1.31ms /node_modules/.vite/react.js?v=fdf86eb2 +5ms
  vite:cache [memory] /node_modules/.vite/react-dom.js?v=fdf86eb2 +5ms
  vite:time 1.80ms /node_modules/.vite/react-dom.js?v=fdf86eb2 +5ms
  vite:cache [memory] /src/index.css +5ms
  vite:time 3.13ms /src/index.css +4ms
  vite:cache [memory] /src/App.tsx +5ms
  vite:time 1.23ms /src/App.tsx +6ms
  vite:cache [memory] /node_modules/.vite/react_jsx-dev-runtime.js?v=fdf86eb2 +3ms
  vite:time 2.08ms /node_modules/.vite/react_jsx-dev-runtime.js?v=fdf86eb2 +3ms
  vite:cache [memory] /node_modules/.vite/chunk-F5R5HRHB.js?v=fdf86eb2 +28ms
  vite:time 2.96ms /node_modules/.vite/chunk-F5R5HRHB.js?v=fdf86eb2 +29ms
  vite:cache [memory] /node_modules/.vite/chunk-Y2Y6XLF4.js?v=fdf86eb2 +5ms
  vite:time 27.61ms /node_modules/.vite/chunk-Y2Y6XLF4.js?v=fdf86eb2 +30ms
  vite:cache [memory] /node_modules/.vite/@yangfee_dep-1-demo.js?v=fdf86eb2 +53ms
  vite:time 25.21ms /node_modules/.vite/@yangfee_dep-1-demo.js?v=fdf86eb2 +50ms
  vite:cache [memory] /src/App.css +57ms
  vite:time 0.88ms /src/App.css +33ms
  vite:time 2.21ms /src/favicon.svg +414ms

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[ayangliayangli]

I try follow config , not work

export default defineConfig({
  plugins: [react()],
  optimizeDeps: {
    include: ["@yangfee/dep-1-demo > @alifd/next"],
  }
})

[nanslee]

have the problem been solved? I have the same problem

[cjinhuo]

I try follow config , not work

export default defineConfig({
  plugins: [react()],
  optimizeDeps: {
    include: ["@yangfee/dep-1-demo > @alifd/next"],
  }
})

🤔 I have the same problem in other project too.I think that error is caused by require,so I download the minimal project you provider,then change from require to import in node_modules/@alifd/next/lib/cascader-select/style.js.And run npm intall sass -D to support sass file.Finally,it normal operation,but it's not a final solution.

[cjinhuo]

I try follow config , not work

export default defineConfig({
  plugins: [react()],
  optimizeDeps: {
    include: ["@yangfee/dep-1-demo > @alifd/next"],
  }
})

🤔 I have the same problem in other project too.I think that error is caused by require,so I download the minimal project you provider,then change from require to import in node_modules/@alifd/next/lib/cascader-select/style.js.And run npm intall sass -D to support sass file.Finally,it normal operation,but it's not a final solution.

[doubleksk]

so, does anyone have a final solution？many projects have the problem to me

[1129958207]

I have the same problem in my project. Does anyone have a final solution？

[boneVidy]

I have the same problem, any one has soluttion?

[frontendpm]

I have the same issue with imported package from node_modules.
this is the problematic code in node_modules:

Object.defineProperty(exports, "__esModule", { value: true });
var Cta_1 = require("./Cta");
__exportStar(require("./Cta"), exports);
exports.default = Cta_1.default;

[Migord]

I have the similar problem, but my dependency is umd file, has anyone solved it?

[superjose]

Wait, found the solution, there's a plugin for Vite from originjs team. This worked for me while trying to implement tiny-react-slider:

https://www.npmjs.com/package/@originjs/vite-plugin-commonjs

Install the plugin:

 yarn add @originjs/vite-plugin-commonjs -D

Add it to your vite config:

import path from 'path';
import { defineConfig } from 'vite';
import tsconfigPaths from 'vite-tsconfig-paths';
import eslintPlugin from 'vite-plugin-eslint';
import react from '@vitejs/plugin-react';
import { viteCommonjs, esbuildCommonjs } from '@originjs/vite-plugin-commonjs';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    // This creates part of the magic.
    viteCommonjs(),

    // https://www.npmjs.com/package/@vitejs/plugin-react
    react({
      // exclude: /\.stories\.(t|j)sx?$/,

      babel: {
        // presets: ['@babel/preset-env'],
        // babelrc: true,
        parserOpts: {
          plugins: [
            'optionalChaining',
            'nullishCoalescingOperator',
            'logicalAssignment',
          ],
        },
      },
    }),
    tsconfigPaths(),
    eslintPlugin(),
  ],

  optimizeDeps: {
    esbuildOptions: {
      plugins: [
        // Solves:
        // https://github.com/vitejs/vite/issues/5308
        // add the name of your package
        esbuildCommonjs(['tiny-slider', 'tiny-slider-react']),
      ],
    },
  },

});

(Note, I don't think the babel option is needed, but I'm including it just so everyone knows my exact config).

[Yunie9]

Wait, found the solution, there's a plugin for Vite from originjs team. This worked for me while trying to implement tiny-react-slider:

https://www.npmjs.com/package/@originjs/vite-plugin-commonjs

Install the plugin:

 yarn add @originjs/vite-plugin-commonjs -D

Add it to your vite config:

import path from 'path';
import { defineConfig } from 'vite';
import tsconfigPaths from 'vite-tsconfig-paths';
import eslintPlugin from 'vite-plugin-eslint';
import react from '@vitejs/plugin-react';
import { viteCommonjs, esbuildCommonjs } from '@originjs/vite-plugin-commonjs';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    // This creates part of the magic.
    viteCommonjs(),

    // https://www.npmjs.com/package/@vitejs/plugin-react
    react({
      // exclude: /\.stories\.(t|j)sx?$/,

      babel: {
        // presets: ['@babel/preset-env'],
        // babelrc: true,
        parserOpts: {
          plugins: [
            'optionalChaining',
            'nullishCoalescingOperator',
            'logicalAssignment',
          ],
        },
      },
    }),
    tsconfigPaths(),
    eslintPlugin(),
  ],

  optimizeDeps: {
    esbuildOptions: {
      plugins: [
        // Solves:
        // https://github.com/vitejs/vite/issues/5308
        // add the name of your package
        esbuildCommonjs(['tiny-slider', 'tiny-slider-react']),
      ],
    },
  },

});

(Note, I don't think the babel option is needed, but I'm including it just so everyone knows my exact config).

Thank you so much, man. It work for me.

I was troubled by this problem for a long time until I read your comments.

[Mosaab-Emam]

Wait, found the solution, there's a plugin for Vite from originjs team. This worked for me while trying to implement tiny-react-slider:

https://www.npmjs.com/package/@originjs/vite-plugin-commonjs

Install the plugin:

 yarn add @originjs/vite-plugin-commonjs -D

Add it to your vite config:

import path from 'path';
import { defineConfig } from 'vite';
import tsconfigPaths from 'vite-tsconfig-paths';
import eslintPlugin from 'vite-plugin-eslint';
import react from '@vitejs/plugin-react';
import { viteCommonjs, esbuildCommonjs } from '@originjs/vite-plugin-commonjs';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    // This creates part of the magic.
    viteCommonjs(),

    // https://www.npmjs.com/package/@vitejs/plugin-react
    react({
      // exclude: /\.stories\.(t|j)sx?$/,

      babel: {
        // presets: ['@babel/preset-env'],
        // babelrc: true,
        parserOpts: {
          plugins: [
            'optionalChaining',
            'nullishCoalescingOperator',
            'logicalAssignment',
          ],
        },
      },
    }),
    tsconfigPaths(),
    eslintPlugin(),
  ],

  optimizeDeps: {
    esbuildOptions: {
      plugins: [
        // Solves:
        // https://github.com/vitejs/vite/issues/5308
        // add the name of your package
        esbuildCommonjs(['tiny-slider', 'tiny-slider-react']),
      ],
    },
  },

});

(Note, I don't think the babel option is needed, but I'm including it just so everyone knows my exact config).

Solved my problem. God bless you man.

[AustinGrey]

superjose's solution worked for me when running the dev server, but failed when attempting to deploy my code. In my case I'm trying to use ts-morph in the browser, which I think only comes as a UMD package. But the package does a dynamic import of code-block-writer, which is available as both UMD and ESM, but the UMD module is what ends up being resolved. In my case I get the same "Dynamic require ... not supported" but for a piece of code that code-block-writer includes in it's distributed files called "comment_char.js". This isn't a node_module dependency, it's literally just another file in the code-block-writer package. If I change the esbuild options to include

...
plugins: [esbuildCommonjs(["code-block-writer"])],
...

like superjose suggests, the npm run dev command works, but the built files error out again with this error

Could not dynamically require "./comment_char.js". Please configure the dynamicRequireTargets or/and ignoreDynamicRequires option of @rollup/plugin-commonjs appropriately for this require call to work.

This error happens even if I build in development mode.

Instead I got lucky and was able to use the 'alias' feature of vite config to force code-block-writer to be imported using the ESM files, instead of the UMD files that were imported presumably because the package importing it was UMD (ts-morph). Now it's working on dev and build. This may not be an option if the deep dependency causing the problem does not have an ESM version, but since it's using the alias feature, you could make an ESM build of the dependency and then alias to your own version.

[johnfraney]

@AustinGrey Would you be able to share the alias config you used?

[sapphi-red]

I cannot confirm because the repro is now 404, but I think #8459 fixed this issue too.