错误 [ERR_REQUIRE_ESM]：ES 模块的 require() - Vue 3 Typescript

Posted 2023-02-23

【中文标题】错误 [ERR_REQUIRE_ESM]：ES 模块的 require() - Vue 3 Typescript

【英文标题】：Error [ERR_REQUIRE_ESM]: require() of ES Module - Vue 3 Typescript

【发布时间】：2021-12-07 15:23:02

【问题描述】：

我目前正在将 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

【参考方案1】：

问题是你的 module.exports= module.exports 与 Commonjs 一起使用，但你的包 json 中有模块。你需要改成export default

【讨论】：

然后我得到相同的错误，就好像我没有使用 "type": "module" (SyntaxError: Cannot use import statement outside a module): i.imgur.com/uZeFHvv.png

如果你有 TS 让它处理它们的模块，删除 "type":"module"

我目前已经在这样做了。我已经链接了我的 github 项目

为什么不用vue/cli cli.vuejs.org/guide/creating-a-project.html#vue-create

我在项目中使用@vue/cli 4.5.13。这是我的配置：i.imgur.com/vZvdLlY.png

【参考方案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"