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

ayangliayangli · 2021-10-15T09:30:15Z

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 · 2021-10-15T09:36:51Z

I try follow config , not work

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

nanslee · 2021-11-10T08:45:27Z

have the problem been solved? I have the same problem

cjinhuo · 2021-11-11T04:48:11Z

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 · 2021-11-11T04:49:17Z

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 · 2021-11-19T02:18:49Z

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

1129958207 · 2021-11-25T01:31:57Z

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

boneVidy · 2021-12-11T13:13:36Z

I have the same problem, any one has soluttion?

frontendpm · 2021-12-21T07:15:21Z

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 · 2021-12-31T09:30:31Z

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

superjose · 2022-01-12T05:31:12Z

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 · 2022-01-18T17:56:17Z

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 · 2022-03-14T09:39:01Z

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 · 2022-04-28T17:42:23Z

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 · 2022-05-11T20:02:17Z

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

sapphi-red · 2022-06-05T17:05:22Z

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

ayangliayangli added the pending triage label Oct 15, 2021

laoyutong mentioned this issue Feb 28, 2022

Vite实战小结 laoyutong/blog#23

Open

veekeys mentioned this issue Mar 18, 2022

fix: export ToastPresentation iTwin/iTwinUI-react#590

Closed

5 tasks

SivanWong mentioned this issue Mar 24, 2022

Internal server error: Failed to resolve import "' + name + '" from "node_modules/.vite/react-app-polyfill_stable.js?v=9b889127". Does the file exist? #7429

Closed

7 tasks

iceqing mentioned this issue Mar 24, 2022

vite分支使用yarn安装后，Dashboard的图表无法显示 iceqing/react-amis-admin#3

Closed

taily-khucnaykhongquantrong mentioned this issue Mar 28, 2022

react-daterange-picker doesn't work when using vite wojtekmaj/react-daterange-picker#88

Closed

sapphi-red closed this as completed Jun 5, 2022

sapphi-red mentioned this issue Jun 5, 2022

fix(optimizer): external require-import conversion (fixes #2492, #3409, #5308) #8459

Merged

9 tasks

github-actions bot locked and limited conversation to collaborators Jun 20, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

ayangliayangli commented Oct 15, 2021

ayangliayangli commented Oct 15, 2021

nanslee commented Nov 10, 2021

cjinhuo commented Nov 11, 2021

cjinhuo commented Nov 11, 2021

doubleksk commented Nov 19, 2021 •

edited

Loading

1129958207 commented Nov 25, 2021

boneVidy commented Dec 11, 2021

frontendpm commented Dec 21, 2021 •

edited

Loading

Migord commented Dec 31, 2021

superjose commented Jan 12, 2022

Yunie9 commented Jan 18, 2022

Mosaab-Emam commented Mar 14, 2022

AustinGrey commented Apr 28, 2022

johnfraney commented May 11, 2022

sapphi-red commented Jun 5, 2022

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

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

Comments

ayangliayangli commented Oct 15, 2021

Describe the bug

Reproduction

System Info

Used Package Manager

Logs

Validations

ayangliayangli commented Oct 15, 2021

nanslee commented Nov 10, 2021

cjinhuo commented Nov 11, 2021

cjinhuo commented Nov 11, 2021

doubleksk commented Nov 19, 2021 • edited Loading

1129958207 commented Nov 25, 2021

boneVidy commented Dec 11, 2021

frontendpm commented Dec 21, 2021 • edited Loading

Migord commented Dec 31, 2021

superjose commented Jan 12, 2022

Yunie9 commented Jan 18, 2022

Mosaab-Emam commented Mar 14, 2022

AustinGrey commented Apr 28, 2022

johnfraney commented May 11, 2022

sapphi-red commented Jun 5, 2022

doubleksk commented Nov 19, 2021 •

edited

Loading

frontendpm commented Dec 21, 2021 •

edited

Loading