錯誤 [ERR_REQUIRE_ESM]：ES 模塊的 require() - Vue 3 Typescript

Question

我目前正在將 mdx 集成到我的 vue 3 打字稿項目中。 但是，在配置 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"時的錯誤"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

問題是 yow module.exports= module.exports與Commonjs module.exports使用，但您在 yow 包 json 中有模塊。 您需要將其更改為export default

Answer 2

更新 devDependencies 並將vue.config.js重命名為vue.config.mjs修復了錯誤：

diff --git a/package.json b/package.json
index 884779f..d2f602d 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,6 @@
   },
   "dependencies": {
     "@mdx-js/loader": "^2.0.0-rc.1",
-    "@mdx-js/mdx": "^2.0.0-rc.1",
     "@mdx-js/vue": "^2.0.0-rc.1",
     "core-js": "^3.6.5",
     "remark-gfm": "^3.0.0",
@@ -17,16 +16,16 @@
     "vue-class-component": "^8.0.0-0"
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^4.18.0",
-    "@typescript-eslint/parser": "^4.18.0",
+    "@typescript-eslint/eslint-plugin": "^5.1.0",
+    "@typescript-eslint/parser": "^5.1.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/cli-plugin-babel": "5.0.0-beta.6",
+    "@vue/cli-plugin-eslint": "5.0.0-beta.6",
+    "@vue/cli-plugin-typescript": "5.0.0-beta.6",
+    "@vue/cli-service": "5.0.0-beta.6",
     "@vue/compiler-sfc": "^3.0.0",
-    "@vue/eslint-config-typescript": "^7.0.0",
-    "eslint": "^6.7.2",
+    "@vue/eslint-config-typescript": "^8.0.0",
+    "eslint": "^8.0.0",
     "eslint-plugin-vue": "^7.0.0",
     "typescript": "~4.1.5"
   }