错误[ERR_REQUIRE_ESM]:ES模块的require() - Vue 3类型脚本

浏览 4039关注 2回答 2得票数 0
原文

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

原文
Kuqs修改于2021-10-21 06:46

2 个回答

高票数最新
Ernesto
回答于2021-10-20 20:49
得票数 0

问题是yow module.exports= module.exportsCommonjs一起使用,但yow package json中有模块。您需要将其更改为export default

Kuqs
回答于2021-10-21 10:06已采纳
得票数 0

更新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"
   }
页面原文内容由Kuqs、Ernesto提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:https://stackoverflow.com/questions/69652191复制

扫码关注腾讯云开发者

领取腾讯云代金券

http://www.vxiaotou.com