node.js - 错误 [ERR_REQUIRE_ESM] : require() of ES Module - Vue 3 Typescript

Question

我目前正在将 mdx 集成到我的 vue 3 typescript 项目中。但是，在配置 vue.config.js 时出现以下错误:

yarn run v1.22.11
$ vue-cli-service serve

ERROR  Error loading C:\Users\Jannik\Desktop\mdx-vue3\vue.config.js:
ERROR  Error [ERR_REQUIRE_ESM]: require() of ES Module C:\Users\Jannik\Desktop\mdx-vue3\vue.config.js from C:\Users\Jannik\Desktop\mdx-vue3\node_modules\@vue\cli-shared-utils\lib\module.js not supported.
Instead change the require of vue.config.js in C:\Users\Jannik\Desktop\mdx-vue3\node_modules\@vue\cli-shared-utils\lib\module.js to a dynamic import() which is available in all CommonJS modules.

Error [ERR_REQUIRE_ESM]: require() of ES Module C:\Users\Jannik\Desktop\mdx-vue3\vue.config.js from C:\Users\Jannik\Desktop\mdx-vue3\node_modules\@vue\cli-shared-utils\lib\module.js not supported.
Instead change the require of vue.config.js in C:\Users\Jannik\Desktop\mdx-vue3\node_modules\@vue\cli-shared-utils\lib\module.js to a dynamic import() which is available in all CommonJS modules.
at exports.loadModule (C:\Users\Jannik\Desktop\mdx-vue3\node_modules\@vue\cli-shared-utils\lib\module.js:79:14)
at Service.loadUserOptions (C:\Users\Jannik\Desktop\mdx-vue3\node_modules\@vue\cli-service\lib\Service.js:330:22)
at Service.init (C:\Users\Jannik\Desktop\mdx-vue3\node_modules\@vue\cli-service\lib\Service.js:70:30)
at Service.run (C:\Users\Jannik\Desktop\mdx-vue3\node_modules\@vue\cli-service\lib\Service.js:215:10)
at Object.<anonymous> (C:\Users\Jannik\Desktop\mdx-vue3\node_modules\@vue\cli-service\bin\vue-cli-service.js:36:9)

error Command failed with exit code 1.

info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Process finished with exit code 1

我的 vue.config.js:

import remarkGfm from "remark-gfm";

module.exports = {
chainWebpack: config => {
    config.module
        .rule('mdx')
        .test(/\.mdx?$/)
        .use('babel-loader')
        .loader('babel-loader')
        .options({plugins: ['@vue/babel-plugin-jsx'], /* Other options… */})
        .end()
        .use('@mdx-js/loader')
        .loader('@mdx-js/loader')
        .options({jsx: true, remarkPlugins: [remarkGfm], /* otherOptions… */})
        .end()
    }
}

我的package.json:

{
  "name": "mdx-vue3",
  "version": "0.1.0",
  "private": true,
  "type": "module",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@mdx-js/loader": "^2.0.0-rc.1",
    "@mdx-js/vue": "^2.0.0-rc.1",
    "core-js": "^3.6.5",
    "remark-gfm": "^3.0.0",
    "vue": "^3.0.0",
    "vue-class-component": "^8.0.0-0"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^4.18.0",
    "@typescript-eslint/parser": "^4.18.0",
    "@vue/babel-plugin-jsx": "^1.1.1",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/eslint-config-typescript": "^7.0.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0",
    "typescript": "~4.1.5"
  }
}

我不使用“type”:“module”时的错误:

C:\Users\Jannik\Desktop\mdx-vue3\vue.config.js:1
import remarkGfm from "remark-gfm";
^^^^^^

SyntaxError: Cannot use import statement outside a module

我的 tsconfig.json:

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

我用 Node.js v14 和 v16 尝试了整个过程。我每次也删除了我的node_modules。

如果我将文件重命名为 vue.config.mjs 错误就会消失，但 mdx-loader 将不再工作。

完整项目:https://github.com/jannikbuscha/mdx-vue3

Answer 1

问题是你的 module.exports= module.exports 与 Commonjs 一起使用，但你的包 json 中有模块。您需要将其更改为导出默认值