Cannot read property 'parseComponent' of undefined

I want to write a custom loader to process markdown format files,

web.config.js

module.exports = {
    configureWebpack: config => {
        config.module.rules.push({
            test: /\.md$/,
            use: [
                {
                    loader: 'vue-loader'
                },
                {
                    loader: require.resolve('./src/testLoader')
                }
            ]
        })
    }
}

testLoader.js

module.exports = function (value) {
    console.log(value)
    return "<template>" + value + "</template>"
}

HelloComponent.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
import md from "./cx.md";
export default {
  name: "HelloWorld",
  components: {
    md,
  },
  props: {
    msg: String,
  },
};
</script>

The solution the search engine found was to keep the vue version and the version of the Ue-template-compiler consistent, but the vue version was 3.0 and the version of the Ue-template-compiler was the latest version 2.6.12.


 ERROR  Failed to compile with 3 errors                                                                                                                                                         9:58:20
 error  in ./src/components/HelloWorld.vue

Module Error (from ./node_modules/eslint-loader/index.js):

C:\Users\cx\Desktop\bao\demo3\src\components\HelloWorld.vue
  12:5  error  The "md" component has been registered but not used  vue/no-unused-components

✖ 1 problem (1 error, 0 warnings)

 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/App.vue?vue&type=script&lang=js 1:0-53 5:16-26
 @ ./src/App.vue?vue&type=script&lang=js
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.13.2:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

 error  in ./src/components/cx.md

Module Error (from ./node_modules/vue-loader/lib/index.js):

Vue packages version mismatch:

- vue@3.0.0 (C:\Users\cx\Desktop\bao\demo3\node_modules\vue\index.js)
- vue-template-compiler@2.6.12 (C:\Users\cx\Desktop\bao\demo3\node_modules\vue-template-compiler\package.json)

This may cause things to work incorrectly. Make sure to use the same version for both.
If you are using vue-loader@>=10.0, simply update vue-template-compiler.
If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest.

 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/components/HelloWorld.vue?vue&type=script&lang=js 1:0-25 5:8-10
 @ ./src/components/HelloWorld.vue?vue&type=script&lang=js
 @ ./src/components/HelloWorld.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/App.vue?vue&type=script&lang=js
 @ ./src/App.vue?vue&type=script&lang=js
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.13.2:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

 error  in ./src/components/cx.md

Module build failed (from ./node_modules/vue-loader/lib/index.js):
TypeError: Cannot read property 'parseComponent' of undefined
    at parse (C:\Users\cx\Desktop\bao\demo3\node_modules\@vue\component-compiler-utils\dist\parse.js:14:23)
    at Object.module.exports (C:\Users\cx\Desktop\bao\demo3\node_modules\vue-loader\lib\index.js:67:22)

 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/components/HelloWorld.vue?vue&type=script&lang=js 1:0-25 5:8-10
 @ ./src/components/HelloWorld.vue?vue&type=script&lang=js
 @ ./src/components/HelloWorld.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/App.vue?vue&type=script&lang=js
 @ ./src/App.vue?vue&type=script&lang=js
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.13.2:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

I saw a person raise this problem before, but according to the solution below, it cannot be solved #82

vuejs / component-compiler-utils

Cannot read property 'parseComponent' of undefined #95