文章目录
- 一、问题描述
- 二、问题解决
一、问题描述
在vite中，可以使用vite-plugin-static-copy工具将文件拷贝到指定的dist目录。
于是我开始构建：
npm run build
发现报错：
failed to load config from D:\AIProject\translationChrome\vite.config.js
error during build:
Error [ERR_REQUIRE_ESM]: require() of ES Module D:\AIProject\translationChrome\node_modules\vite-plugin-static-copy\dist\index.js from D:\AIProject\translationChrome\vite.config.js not supported.
Instead change the require of index.js in D:\AIProject\translationChrome\vite.config.js to a dynamic import() which is available in all CommonJS modules.at _require.extensions.<computed> [as .js] (file:///D:/AIProject/translationChrome/node_modules/vite/dist/node/chunks/dep-BJP6rrE_.js:53946:9)at Object.<anonymous> (D:\AIProject\translationChrome\vite.config.js:37:38)
大意是因为 vite-plugin-static-copy 是一个 ES 模块，而我的 vite.config.js 使用的是 CommonJS 模块格式（require），这两者存在不兼容问题。Vite 配置文件默认是 ESM（ES Modules）格式，所以需要使用 import 而不是 require。
二、问题解决
我确认了下vite.config.js中引入vite-plugin-static-copy确实是用import的方式的。
import { viteStaticCopy } from 'vite-plugin-static-copy';
按道理，不会有这种问题，因为其他模块也是这样，但是没有报错。
经过网上搜索和将问题丢给AI诊断，终于发现原来是我的package.json中没有配置 "type": "module",这个选项导致。
之前项目中有这个，只是没留意，那它的作用是什么：
When set to “module”, the type field allows a package to specify all .js files within are ES modules. If the “type” field is omitted or set to “commonjs”, all .js files are treated as CommonJS.
翻译过来的意思是：
当设置 “type”: “module”,时，允许package 中的所有的.js模块当做ES modules，但是如果该配置缺失或者设置为了"commonjs"，那么就会当做CommonJS模块来处理。
而我的问题恰好是因为没有设置的原因，导致在构建时，当做了CommonJS来处理，从而报错。
所以，解决问题的方式就是在项目根目录下的package.json添加一行配置：
{"type": "module", //加这一行"name": "translation","version": "1.0.0","description": ""
}
要不是遇到了这个问题，还真没留意到"type": "module",的作用。特此笔记记录。
如果你在web前端开发、面试、前端学习路线有困难可以在下方加我名片。
免费答疑，行业深潜多年的技术牛人帮你解决bug。
并可提供web前端开发，网站开发、技术咨询、答疑、直播讲座等服务。
祝你能成为一名优秀的WEB前端开发工程师！