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

Question

我试图在我使用 Vite 的项目中使用 react-flagpack，但每当我使用它时，我都会收到以下错误：

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

这是Vite的问题吗？还是我做错了什么。

提前致谢！

Answer 1

自 2021 年 6 月 14 日起，它现已受支持。 :3

Answer 2

你能检查一下这是否有效吗？我不知道它是否适用于 react-flagpack；这可能是破坏构建的 require 语句...我找到了使用 @originjs/vite-plugin-commonjs, which I posted here.

的解决方案

首先安装包：

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

or

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

然后，在您的 vite.config 文件中：


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'])
      ],
    },
  },

});

然后，尝试正常加载文件。这对我有用 tiny-react-slider ，它对 .css 文件

使用 require 语句

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

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

reactjs

vite