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

CodePudding user response：

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

CodePudding user response：

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"
   }