I am currently integrating mdx into my vue 3 typescript project. However, I get the following error when configuring the 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
My 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()
}
}
My 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"
}
}
The error when im not using "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
My 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"
]
}
I tried the whole thing with node.js v14 and v16. I also deleted my node_modules each time.
If i rename the file to vue.config.mjs
the errors disappear, but then the mdx-loader does not work anymore.
Full project: https://github.com/jannikbuscha/mdx-vue3
The problem is yow module.exports= module.exports
is used with Commonjs
but you have modules in yow package json. You need to change it to export default
Updating the devDependencies and renaming vue.config.js
to vue.config.mjs
fixed the error:
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"
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.