Vite产品构建错误：`...is不是node_modules的构造函数

Question

我试图使用Vite为一个简单的基于Vue的项目进行构建，但在实际处理构建时遇到了一个错误。

我的vite.config.js文件：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import nodePolyfills from 'rollup-plugin-node-polyfills'
import commonjs from '@rollup/plugin-commonjs'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    nodePolyfills(),
    commonjs(),
  ],

  resolve: {
    alias: [
      {
        // this is required for the SCSS modules
        find: /^~(.*)$/,
        replacement: '$1',
      },
    ],
  },

  build: {
    outDir: './dist',
  },
})

构建命令vite build在没有警告的情况下运行良好，并在dist文件夹中编译这些文件：

• dist/index.html
• 区/资产/索引83eff058.js
• 区域/资产/索引.acd5fd56.css
• dist/assets/vendor.96c4e7e1.js (问题文件)

在为我构建的项目提供服务时，我会得到这样的错误，这个错误会导致整个事件崩溃，除了CSS之外，它不会加载任何内容：

Uncaught TypeError: Vg is not a constructor
    XA http://localhost:5000/assets/vendor.96c4e7e1.js:5
    <anonymous> http://localhost:5000/assets/vendor.96c4e7e1.js:5
vendor.96c4e7e1.js:5:11738
    XA http://localhost:5000/assets/vendor.96c4e7e1.js:5
    <anonymous> http://localhost:5000/assets/vendor.96c4e7e1.js:5
    InnerModuleEvaluation self-hosted:2388
    InnerModuleEvaluation self-hosted:2388
    evaluation self-hosted:2349

我已经阅读了Vite和Rollup文档，甚至不知道该寻找什么。这是因为巴别尔的缺乏，还是因为其他的原因？

Answer 1

如果您运行的是Vite v3，那么您应该看看这评论中的酸枣红色：

它似乎与@rollup/ v22有关。 对于解决方法，在构建时使用。设置optimizeDeps.disabled = false和build.commonjsOptions.include = []。

下面是实现他提到的解决方法的配置：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  build: {
    commonjsOptions: { include: [] },
  },
  optimizeDeps: {
    disabled: false,
  },
});