Vitejs | Uncaught Error: Dynamic require of "<path>.svg" is not supported

user_11673088 0
Viewed 2611

I'm trying to use react-flagpack in my project that uses Vite, but whenever I use it i get the following error:

Uncaught Error: Dynamic require of "node_modules/flagpack-core/dist/flags/cDBuMQWP.svg" is not supported

Is this an issue with Vite? or am I doing something wrong.

Thanks in advance!

vite reactjs
2 Answers

As of June 14th 2021 it's now supported. :3

user_116730880

Can you check if this works? I don't know if it will for react-flagpack; this is likely a require statement that is breaking the build... I found a solution using @originjs/vite-plugin-commonjs, which I posted here.

First install the package:

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

or

 npm i @originjs/vite-plugin-commonjs -D

And then, in your vite.config file:


import { defineConfig } from 'vite';
import { viteCommonjs, esbuildCommonjs } from '@originjs/vite-plugin-commonjs';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    viteCommonjs(),
  ],
  optimizeDeps: {
    esbuildOptions: {
      plugins: [
        // Solves:
        // https://github.com/vitejs/vite/issues/5308
        esbuildCommonjs(['react-flagpack'])
      ],
    },
  },

});

Then, try loading your file normally. This worked for me using tiny-react-slider which was using a require statement for a .css file

user_10570520
Related