为什么运行下段代码后会报错，postcss.config.js 文件的后缀名从 .js 改为 .cjs，或者将内容注释掉，可以解决？

Question

D:\dev\learn\imooc-front> npm run dev

imooc-front@0.0.0 dev
vite --host

Port 5173 is in use, trying another one…

VITE v4.3.7 ready in 327 ms

➜ Local: http://localhost:5174/
➜ Network: http://192.168.63.1:5174/
➜ Network: http://192.168.137.1:5174/
➜ Network: http://10.63.180.113:5174/
➜ press h to show help
node:internal/process/promises:288
triggerUncaughtException(err, true /fromPromise/);
^

[Failed to load PostCSS config: Failed to load PostCSS config (searchP
ath: D:/dev/learn/imooc-front): [Failed to load PostCSS config] Failed to load PostCSS config (searchPath: D:/dev/learn/imooc-front): [ReferenceError] module is not defined in ES module scope This file is being treated as an ES module because it has a ‘.js’ file
extension and ‘D:\dev\learn\imooc-front\package.json’ contains “type”: “module”. To treat it as a CommonJS script, rename it to use the ‘.cjs’ file extension. ReferenceError: module is not defined in ES module scope
This file is being treated as an ES module because it has a ‘.js’ file
extension and ‘D:\dev\learn\imooc-front\package.json’ contains “type”: “module”. To treat it as a CommonJS script, rename it to use the ‘.cjs’ file extension. at file:///D:/dev/learn/imooc-front/postcss.config.js:1:1
at ModuleJob.run (node:internal/modules/esm/module_job:194:25)
]
可以说一下为什么会产生这种报错？以及两种解决方案的原理吗?比较推荐哪种解决方案呢？

Answer 1

Sunday 2023-05-18 14:01:00

你好

这个其实是模块化的问题导致的。现在的模块化大部分是两种： CommonJS（CJS），ES Module（ESM），两种模块化的方式一般是不通用的。而在 vite 中默认支持的是 ESM ，所以 CJS 导入需要单独配置。