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

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).

have the problem been solved? I have the same problem

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.

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.

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.