Next.js项目执行npm run format时出现ES模块导入错误求助

执行npm run format时触发如下错误：

[error] 文件"/Users/hello/Documents/projects/hello_world/.eslintrc.json"配置无效：
[error] 不支持使用require()导入ES模块/Users/hello/Documents/projects/hello_world/node_modules/prettier-plugin-tailwindcss/dist/index.mjs。
[error] 请改为使用所有CommonJS模块都支持的动态import()来导入该模块。

相关配置文件 #

• .eslintrc.json

{
  "extends": "next/core-web-vitals",
  "ignorePatterns": [".eslintrc.json"]
}

• prettier.config.js

module.exports = {
    bracketSpacing: true,
    semi: true,
    trailingComma: "all",
    printWidth: 80,
    tabWidth: 2,
    plugins: [require("prettier-plugin-tailwindcss")],
};

• package.json（关键脚本与依赖）

{
  "scripts": {
    "lint": "next lint",
    "format:write": "prettier --write \"**/*.{css,js,json,jsx,ts,tsx}\"",
    "format": "prettier \"**/*.{css,js,json,jsx,ts,tsx}\""
  },
  "devDependencies": {
    "prettier": "^3.0.3",
    "prettier-plugin-tailwindcss": "^0.5.4"
  }
}

问题原因 #

prettier-plugin-tailwindcss@0.5.4是ES模块，而当前prettier.config.js采用CommonJS格式，使用require()直接导入ES模块会触发兼容性错误。

解决方案 #

方案1：切换为ES模块格式的配置文件

1. 将prettier.config.js重命名为prettier.config.mjs
2. 修改配置内容为：

export default {
    bracketSpacing: true,
    semi: true,
    trailingComma: "all",
    printWidth: 80,
    tabWidth: 2,
    plugins: ["prettier-plugin-tailwindcss"],
};

Prettier会自动识别并加载指定插件，无需手动导入。

方案2：在CommonJS中使用动态导入（兼容现有文件格式）

如果不想修改配置文件扩展名，可将配置改为异步函数，通过动态导入加载ES模块：

export default async () => {
    const plugin = await import("prettier-plugin-tailwindcss");
    return {
        bracketSpacing: true,
        semi: true,
        trailingComma: "all",
        printWidth: 80,
        tabWidth: 2,
        plugins: [plugin.default],
    };
};

此方式要求Prettier版本≥2.0（项目中使用的3.0.3满足要求）。

验证 #

修改完成后重新执行npm run format，错误即可消除。

内容的提问来源于stack exchange，提问作者r121