我目前正在将 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 不再工作。