Vue编译出现This file is being treated as an ES module because it has a '.js' file extension错误

问题描述

在编译前端项目时出现下面的问题：

Failed to load PostCSS config: Failed to load PostCSS config (searchPath: D:/WebProject/imooc-front): [Failed to load PostCSS config] Failed to load PostCSS config (searchPath: D:/WebProject/imooc-front):This file is being treated as an ES module because it has a '.js' file extension and 'D:\WebProject\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:\WebProject\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:/WebProject/imooc-front/postcss.config.js:1:1
    at ModuleJob.run (node:internal/modules/esm/module_job:194:25)

环境

• node : 18.17.1
• vue : 3.3.4
• vite : 4.4.5

原因

NodeJS默认以CommonJS的规范来执行JavaScript代码，使用CommonJS模块的导出和导入方式，也就是对应代码中的module.exports和require关键字，如下所示

module.exports = {
  plugins: [require("tailwindcss"), require("autoprefixer")],
};

在默认使用vite创建的项目中，package.json文件中有一个配置为 "type": "module"，这时对应ECMAScript的语法规范，会使用ES Module模块的方式处理代码，对应的关键词为export和import，代码如下所示：

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {}
  }
}

在packpage.json中定义的方式与代码不符时，就会出现编译错误的情况。

解决方案

1、修改代码，使用与模块编译时对应的关键词

2、默认使用CommonJS的规范时，使用mjs为后缀定义使用ES Module的文件，或者在packpage.json中定义type为module或使用cjs为后缀定义使用CommonJS规范的文件

3、当代码中有两种规范混用的时候，可以使用babel

安装babel相关的依赖：

npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-stage-3

在安装完依赖之后，我们需要在项目根目录下创建一个.babelrc文件，这个文件将会用来指定babel的配置。

{
"presets": [
["env", {"modules": false}],
"stage-3"
]}