下一个构建：错误：Next.js Babel 加载器不支持 .mjs 或 .cjs 配置文件

Question

我在

"type": "module"

中有

"next": "^12.2.5",

和

package.json

。 我的

tsconfig.json

:

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "esnext",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext",
      "ES2022"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "baseUrl": ".",
    "paths": {
      "@app/api/*": [
        "../../api/*"
      ],
      "@app/lib/*": [
        "../../lib/*"
      ]
    },
    "incremental": true
  },
  "exclude": [
    "node_modules"
  ],
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ]
}

我的

babel.config.cjs

：

/* eslint-disable no-template-curly-in-string */

module.exports = {
  presets: [['next/babel']],
  plugins: [
    [
      'babel-plugin-transform-imports',
      {
        lodash: {
          transform: 'lodash/${member}',
          preventFullImport: true,
        },
        '@mui/material': {
          transform: '@mui/material/${member}',
          preventFullImport: true,
        },
        '@mui/icons-material': {
          transform: '@mui/icons-material/${member}',
          preventFullImport: true,
        },
        '@mui/lab': {
          transform: '@mui/lab/${member}',
          preventFullImport: true,
        }
      },
    ],
  ],
}

.eslintrc.cjs

：

module.exports = {
  env: {
    browser: true,
    es2022: true,
    jest: true,
  },
  extends: [
    'airbnb',
    'plugin:import/errors',
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended',
    'prettier/@typescript-eslint',
  ],
<snip>

../../node_modules/next/dist/pages/_app.js
Error: The Next.js Babel loader does not support .mjs or .cjs config files.

Answer 1

接下来建议您使用文件 .cjs 但这是一个坏主意，因为大多数插件不理解该扩展名

即使你将 next.config.js 更改为 next.config.cjs 你也会看到很多错误