We have issue with vue-jest, that uses this package. (vuejs/vue-jest#137 (comment)).
It would be nice to borrow experience on sass-loader and provide a choice of what to use: node-sass or sass (https://github.com/webpack-contrib/sass-loader/blob/master/src/getDefaultSassImplementation.js)

sass-loader requires you to install either Node Sass or Dart Sass on your own (more documentation can be found below). This allows you to control the versions of all your dependencies, and to choose which Sass implementation to use.

Hi, I can use parse function to parse raw SFC source into SFCDescriptor, but how can I parse descriptr into SFC source, Is there any api to do that ?

SFCDescriptor in component-compiler-utils:

SFCDescriptor in vue-template-compiler:

result:

Type 'typeof import("c:/code/vscode-fe-helper/node_modules/vue-template-compiler/types/index")' is not assignable to type 'VueTemplateCompiler'.
  The types of 'parseComponent(...).template' are incompatible between these types.
    Type 'SFCBlock | undefined' is not assignable to type 'SFCBlock | null'.
      Type 'undefined' is not assignable to type 'SFCBlock | null'

version v3.0.1 is missing the lib folder, which causes:

node_modules/vue-loader/lib/index.d.ts:2:37 - error TS2307: Cannot find module '@vue/component-compiler-utils/lib/types'.

2 import { VueTemplateCompiler } from '@vue/component-compiler-utils/lib/types'

A compiler shouldn't depend on code formatting / beautifier utilities. That's the job of the IDE. vscode already handles this very well, for example.

Would you please remove prettier dependency?

The component-compiler-utils module requires vue-template-compiler, but it's not listed as a dependency (only a dev dependency). When I use vue-loader with a custom template compiler, and I don't install vue-template-compiler, I get an error.

Of course as a workaround I can install vue-template-compiler manually. But in that case I end up having three template compilers installed: vue-template-compiler, vue-template-es2015-compiler and my custom template compiler. Is that intentional?

Introducing by 5b299ed

<style scoped>
>>> .foo {
  color: red;
}
</style>

Before:

[data-v-*] .foo { color: red; }

After:

 .foo { color: red; }

I have html via AJAX call which contain components. my problem is component-a is not rending, is it possible in jquery ajax load? i tried vm.compile() and vm.$forceUpdate() on .load callback but nothing happens.

I come about this issue where I stated my grasp of the situation: Morgul/snowpack-plugin-vue2#2

So briefly, is it normal that I don't see a scoped property into TemplateCompileOptions related to the one from StyleCompileOptions? I anticipated something like what is done here: https://github.com/vuejs/vue-next/blob/master/packages/compiler-sfc/src/compileTemplate.ts#L47

Pug's doctype option is set to html by default in pug-plain-loader.
The reasoning is also explained there:

The doctype option is set to html by default, since most Vue templates are HTML fragments without explicit doctype.

The same we should do here in component-compiler-utils (otherwise developers should figure it out and set it by themesevles vuejs/vue-jest#170)

I can create a PR if we agree to do it

In prettier 1.13.0, default parser was removed with a minor version(used to be babylon), this breaks the formatter here.

Issue has been created in prettier repo as well, attached here for tracking purpose.
prettier/prettier#4567

Adding error stack info below for our friend Google to route new comers to:

ERROR in ./src/client/components/Com1.vue?vue&type=template&id=22d07c36 (../happy-cli/node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!../happy-cli/node_modules/vue-loader/lib??vue-loader-options!./src/client/components/Com1.vue?vue&type=template&id=22d07c36)

Module build failed: Error: No parser and no file path given, couldn't infer a parser.
    at normalize ({project_dir}/node_modules/prettier/index.js:7051:13)
    at formatWithCursor ({project_dir}/node_modules/prettier/index.js:10370:12)
    at {project_dir}/node_modules/prettier/index.js:31115:15
    at Object.format ({project_dir}/node_modules/prettier/index.js:31134:12)
    at actuallyCompile ({project_dir}/node_modules/@vue/component-compiler-utils/dist/compileTemplate.js:93:29)
    at compileTemplate ({project_dir}/node_modules/@vue/component-compiler-utils/dist/compileTemplate.js:26:16)
    at Object.module.exports ({project_dir}/node_modules/vue-loader/lib/loaders/templateLoader.js:42:20)

PR: #15

In our build we have noticed an inconsistency with dependencies. Namely, we noticed that yarn is pulling in two versions of prettier. Upon investigation, it was because this package asks for a specific version of prettier (while our app asks for another). Other Vue packages (for example, @vue/eslint-config-prettier) require minor versions---^1.16.3

Is this possibly a bug? Should it be ^1.16.3 as well? Or is there a reason for this specific version of prettier?

Allow transformAssetUrls to be used like this:

transformAssetUrls: {
  'optimize-img': {
     src: value => `require('!optimize-img-loader!${value}')`
  }
}

<template>
  <optimize-img src="./foo.png" />
</template>

I can create a PR if you think it's useful.

With LRUCache updated to version 5.1.1, the vue component compiler utils throw the error
TypeError: Class constructor LRUCache cannot be invoked without 'new'

I think this is due to line 9 in lib/parse.ts:

const cache = require('lru-cache')(100)`;

If this would be changed to

const LRUCache = require('lru-cache');
const cache = LRUCache(100);

I think this would fix the problem.

Does it make sense?

The :root CSS pseudo-class matches the root element of a tree representing the document, it identical to the selector html usually.

But a scoped :root selector dose not match any Element.

With a demonstration which created by @vue/cli 4.0.5：

<!--HelloWorld.vue-->
<style scoped>
:root {
  --font-color: red;
}
h3 {
  color: var(--font-color);
}
</style>

And we got:

<style type="text/css">
[data-v-469af010]:root {
  --font-color: red;
}
h3[data-v-469af010] {
  color: var(--font-color);
}
</style>

h3's font-color wont change, it still inherits from parent element rather than red.

How to resolve?

Scoped :root does not match any element, but a attribute selector with :root do. So, we can get the expected result if changing:

[data-v-469af010]:root { /*balabala*/ }

to

/* proposal A: */
:root { /*balabala*/ }

/* or  */

/* proposal B: */
:root [data-v-469af010] { /*balabala*/ }

I prefer proposal B that will make sure the scoped style rendered as wished. Such as:

<!-- HelloWorld.vue -->
<template>
  <h3>Hello</h3>
</template>

<style scoped>
:root {
  --font-color: red;
}
h3 {
  color: var(--font-color);
}
</style>

<!-- another unscoped style in HelloWorld.vue-->
<style>
:root {
  --font-color: blue;
}
</style>

We will get some css code like this:

<style type="text/css">
:root [data-v-469af010] {
  --font-color: red;
}
h3[data-v-469af010] {
  color: var(--font-color);
}
</style>
<style type="text/css">
:root {
  --font-color: blue;
}
</style>

h3 will rendered with red font color as expected.

I'll create a PR if this issue is logical.

Summary

Version: 1.2.0

Recently many users reported an error at vuejs/vuepress#268, and I reproduced it at my local.

After the investigation, I found:

It's will be compiled into:

result = postcss_1.default(plugins).process(source, postCSSOptions);

But in postcss's dist code, the module was exported as:

exports.default = postcss;
module.exports = exports['default'];

So the module should be used as postcss_1 instead of postcss_1.default.

And I don't know if this is a problem of TSC. but it's truly a issue introduced by upgrade of vue-loader/@vuejs/component-compiler-utils

{ version: 3,
  sources:
   [ '/Users/znck/Workspace/Experiments/repro-rollup-plugin-vue/src/App.vue' ],
  names: [],
  mappings:
   [ [],
     [],
     [],
     [],
     [],
     [],
     [],
     [],
     [],
     [],
     [],
     [ Int32Array [ 0, 0, 11, 0 ] ],
     [ Int32Array [ 0, 0, 12, 0 ] ],
     [ Int32Array [ 0, 0, 13, 0 ] ] ],
  file:
   '/Users/znck/Workspace/Experiments/repro-rollup-plugin-vue/src/App.vue',
  sourceRoot: '/Users/znck/Workspace/Experiments/repro-rollup-plugin-vue',
  sourcesContent:
   [ '<script>\nexport default {\n  \n}\n</script>\n\n<template>\n  <div class="foo">foo</div>\n</template>\n\n<style>\n.foo { \n  color: red;\n}\n</style>' ] }

mappings should be string.

Related: vuejs/rollup-plugin-vue#251

compiler undefined in parse.ts. when I want to compile single vue component as normal.
[ Can't read parseComponent of undefined... ]

I made this same issue on the require-extension-hooks-vue repo. Since I don't know quite where this falls under.

It seems like maybe prettier but I am unsure since it may also be related to Vue?

I am using the hooks repo to setup and run unit tests, however I keep getting this same type error of Super Expression must either be null or a function

I'm not sure why this started happening. You can reproduce it if you simply clone the require-extension-hooks-vue repo here: https://github.com/jackmellis/require-extension-hooks-vue

Any pointers or a possible work around would be greatly appreciated! Maybe I'm just being dumb even I dunno.

If a template is using pug syntax and pug package is not installed, it fails. There should be graceful warning explaining what failed and how to resolve it.

For example:

Component Example.vue uses lang pug for template. Please install the language preprocessor.

$ npm add -D pug

First, mozilla/source-map doesn't support \ as separator at all, because it's designed to be consumed in browser.

mozilla/source-map#91

1. the file and sourceRoot has to be normalized.
   

   component-compiler-utils/lib/parse.ts

   Lines 91 to 93 in 8de35e6

   	const map = new SourceMapGenerator({
   	file: filename,
   	sourceRoot

{
  file: filename.replace(/\\/g, '/'),
  sourceRoot: sourceRoot.replace(/\\/g, '/')
}

There is one more to be fixed in @vue/component-compiler.
https://github.com/vuejs/vue-component-compiler/blob/afa1cd440123e2e0c195908c1e15935273ac64a9/src/assembler.ts#L77

2. actually the default sourceRoot doesn't make much sense, because when serving the source-map to browser, process.cwd() is irrelevant.
   

   component-compiler-utils/lib/parse.ts

   Line 52 in 8de35e6

   sourceRoot = process.cwd(),

Change to

sourceRoot = '',

With the above two fixes, it can fix https://travis-ci.org/dumberjs/gulp-vue-file/builds/477568946
Update: I managed to fix the gulp-vue-file bug within gulp-vue-file by rewriting sourcemaps (normalize sources and file path). But the incoming sourcemaps should also be fixed in vue compiler.

Let me know what you think, I can make some PRs for this.

Trying to use @vue/component-compiler-utils but I can't figure it out. So if you can point me to a contact or a forum or a wiki, that would be great. Thanks in advance.

I was searching in my own codebase and forgot to exclude the node_modules folder on that search. With that I found two typos in your README file... ¯\(ツ)/¯

On Why isn't vue-template-compiler a peerDependency?, you have:

"Not listing it as a peer depedency also allows"

and

"it just to fullfil the peer"

Support for node-sass seems to be hardcoded into this plugin via @vue/component-compiler-utils. It would be great if node-sass could be switched out with dart-sass.

Maybe this is already possible and I'm just overlooking an option?

Expected behavior

I'm using SFC (single file component) hybrid where my js and sass file are linked from my vue file. The sass file itself imports files located in installed packages in node_modules/. With webpack vue plugin these easily get resolved by prefix an npm sass dependency with ~

Actual behavior

I just get these errors regardless of the file I am trying to load from node modules (example package named mymodule with file.scss sitting in root of it):

(VuePlugin plugin) Error: Error: File to import not found or unreadable: ~mymodule/file.scss.

Steps to reproduce the behavior

Create an SFC file and change the SASS to be import from external SASS file:

<style lang="scss" src="./styles.scss"></style>

Import a sass file from the top of the SFC sass file:

import '~mymodule/file.scss'

Would massively appreciate a fix for this, spent hours finding dead ends and broken code for what seems like a very common use case.

The current API surface is the minimal amount of methods needed in vue-loader. There are a few features that are good to have here but not currently present:

CSS pre-processor handling in compileStyle

This is currently not included because in vue-loader CSS preprocessing is delegated to other webpack loaders. However for some other systems that do not support that kind of usage, directly handling preprocessors here will make more sense.

We will need to add the same preprocessLang and preprocessOptions fields to StyleCompileOptions. The implementation should look like the preprocess step in compileTemplate and be synchronous. It will require whatever preprocessor is specified in lang to be separately installed.

const { code, map } = compileStyle({
  source: `...`,
  filename: `...`,
  map: {},

  preprocessLang: styleDescriptor.lang,
  // optional extra options to be passed to the preprocessor
  preprocessOptions: {
    indentedSyntax: true
  }
})

compileScript for JavaScript pre-processor handling

This is left out because again vue-loader delegates script processing to webpack loaders. Same idea:

const { code, map } = compileScript({
  source: `...`,
  filename: `...`,
  map: {},

  preprocessLang: scriptDescriptor.lang,
  preprocessOptions: {
    // ...
  }
})

Actual compilation for babel, ts and coffee can probably be reused from vue-jest.

genId

Probably a good idea to put in this package as well.

assemble

This is intentionally left out because in actual implementations, the assemble step is highly dependent on the targeted system. Behaviors like hot reload and style injection have to be handled differently in different environments.

Tests

Currently this package has no tests for itself yet because most of the logic was tested during the development of vue-loader 15 and later simply moved into this package with minimal modifications.

But we surely need to write the tests :)

Higher-Level Convenience Method

The current vue-component-compiler package can be built on top of this package and expose an API that looks like this:

const templateCompiler = require('vue-template-compiler')
const { createCompiler } = require('vue-component-compiler')

const compiler = createCompiler({
  templateCompiler,
  templateCompilerOptions: {}, // optional
  transpileOptions: {}, // optional, for vue-template-es2015-compiler
  transformAssetUrls: true // optional, defaults to false
})

const compiledDescriptor = compiler.compile({
  source,
  filename,
  isProduction: true // optional, defaults to process.env.NODE_ENV === 'production'
})

Note the compile method returns a descriptor instead of code. The descriptor has the same template, script and style parts but contains compiled code and source maps. It is then up to the user to decide how to assemble these compiled descriptors into final code.

This API may or may not be flexible enough - but ideally tools like vue-jest should be able to use this API instead of the lower level ones.

/cc @znck @eddyerburgh

Please consider updating postcss to a version >= 8.2.13 since versions below are affected by Regular Expression Denial of Service.
See GHSA-566m-qj78-rww5 for more information.

I just made a tool to make prettier works better with Vue SFC, which depends on @vue/component-compiler-utils.

I encountered an error when trying to resolve prettier's sharable config. I noticed that this feature was released in prettier v1.17.0, and my prettier is v1.18.x.

But when I inspected the lock file, I found that @vue/component-compiler-utils is using prettier as a denpendency, too, and locks the version to 1.16.3, which caused this error.

Is the version of prettier necessary to be locked to 1.16.3?

Version

3.2.0

Reproduction link

https://github.com/crixusshen/vuecli-debug-reproduction

Environment info

Environment Info:

  System:
    OS: macOS 10.15.7
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
  Binaries:
    Node: 12.16.3 - ~/.nvm/versions/node/v12.16.3/bin/node
    Yarn: Not Found
    npm: 6.14.5 - ~/.nvm/versions/node/v12.16.3/bin/npm
  Browsers:
    Chrome: 87.0.4280.88
    Edge: Not Found
    Firefox: Not Found
    Safari: 14.0
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.2.1 
    @vue/babel-plugin-transform-vue-jsx:  1.2.1 
    @vue/babel-preset-app:  3.12.1 
    @vue/babel-preset-jsx:  1.2.4 
    @vue/babel-sugar-composition-api-inject-h:  1.2.1 
    @vue/babel-sugar-composition-api-render-instance:  1.2.4 
    @vue/babel-sugar-functional-vue:  1.2.2 
    @vue/babel-sugar-inject-h:  1.2.2 
    @vue/babel-sugar-v-model:  1.2.3 
    @vue/babel-sugar-v-on:  1.2.3 
    @vue/cli-overlay:  3.12.1 
    @vue/cli-plugin-babel: ^3.11.0 => 3.12.1 
    @vue/cli-plugin-eslint: ^3.11.0 => 3.12.1 
    @vue/cli-service: ^3.11.0 => 3.12.1 
    @vue/cli-shared-utils:  3.12.1 
    @vue/component-compiler-utils:  3.2.0 
    @vue/preload-webpack-plugin:  1.1.2 
    @vue/web-component-wrapper:  1.2.0 
    eslint-plugin-vue: ^5.0.0 => 5.2.3 (4.7.1)
    vue: ^2.6.10 => 2.6.12 
    vue-eslint-parser:  2.0.3 (5.0.0)
    vue-hot-reload-api:  2.3.4 
    vue-loader:  15.9.5 
    vue-style-loader:  4.1.2 
    vue-template-compiler: ^2.6.10 => 2.6.12 
    vue-template-es2015-compiler:  1.9.1 
  npmGlobalPackages:
    @vue/cli: 4.4.6

Steps to reproduce

I currently have two subcomponents with the same file name, although their implementations are different. Component A is located in 'src/components/A/HelloWorld.vue', Component B is located in 'src/components/B/HelloWorld.vue', although they are in A and B directories respectively, but their file names are called HelloWorld.vue.

Then use them separately in the main component:

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <HelloWorld2 msg="Welcome to Your React.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/A/HelloWorld.vue'
import HelloWorld2 from './components/B/HelloWorld.vue'

export default {
  name: 'app',
  components: {
    HelloWorld,
    HelloWorld2
  }
}
</script>

And then the view rendering is really expected.But I had trouble debugging in chrome.During debugging, I tried to debug A component, but I could only call out the implementation script of B component.At this point its debug path is located at “webpack:///HelloWorld.vue?hash”.

At this point I infer that as long as the component has the same name as the file name, the one after will override the one before when debugging.At that moment, on this basis and I create the src/components/C/HelloWorld.vue，It really confirmed my hypothesis.

This can cause a lot of trouble during debugging or problems where the debug file is not found.

What is expected?

Able to debug different files with the same name in debugging

What is actually happening?

currently only debug the last component in the same file name

Related issue

vuejs/vue-cli#4535

When using vue-loader with thread-loader, you can't pass the compiler module directly since the options will be serialized by JSON.stringify.

like this

const defaultOptions: AssetURLOptions = {
  video: ['src', 'poster'],
  source: 'src',
  img: 'src',
  image: ['xlink:href', 'href']
}

xlink:href was deprecated since SVG 2 (MDN), also keep xlink:href for compatibility.

Specifying a different transpiler than the current vue-template-es2015-compiler would add the ability for code inside the templates to be processed the same (or a similar) way to the code from <script>.

For example there are outstanding proposals to the ecmascript that currently can be used through babel plugins[1] but they won't work inside the template expressions since they don't follow the same compilation path.

[1] https://babeljs.io/docs/en/babel-plugin-proposal-optional-chaining

 if (firstChar === '.' || firstChar === '~') {
            // when packaged in the browser, path will be using the posix-
            // only version provided by rollup-plugin-node-builtins.
            return `"${(path_1.default.posix || path_1.default).join(transformAssetUrlsOption.base, uriParts.path + (uriParts.hash || ''))}"`;
}

In the code above, can you add the ( firstChar === '@' ) ?

Because of this line, if I have a template which includes something like {{render(data)}} I get weird errors in the console.

[Vue warn]: Error in render: "TypeError: _vm is undefined"

found in

---> <App>
       <Root> vue.runtime.esm.js:56:2
TypeError: "_vm is undefined"
render   http://localhost:1234/main.a1fcaaae.js:11645:7
render   http://localhost:1234/main.a1fcaaae.js:11659:24

Relevant lines in the generated JS source:

/* template */
        Object.assign($ec0164, (function () {
          var render = function() {
  var _vm = this
  var _h = _vm.$createElement
  var _c = _vm._self._c || _h
  return _c("div", { attrs: { id: "app" } }, [
    _vm._v("\n" + _vm._s(render(_vm.data)) + "\n")
  ])
}
var staticRenderFns = []
render._withStripped = true

          return {
            render: render,
            staticRenderFns: staticRenderFns,
            _compiled: true,
            _scopeId: null,
            functional: undefined
          };
        })());

As you can see, it is calling render(_vm.data) instead of _vm.render(_vm.data).

I am using rollup-plugin-vue, and found it has its own postcss configuration item, and my postcss.config.js is not being read. After some investigation, I figured it out that styleCompiler this package requires it.

Is this intended? Or is it a better idea if compiler only extract css, and leave postcss processes to be handled by tools like postcss?

Related issues:

• #55
• #69

Sorry for openning another issue, but I cannot get rid of the version inconsistency of prettier... 😢

I know that could be an issue of yarn, but it would be better if we can bump the version of prettier...

After doing npm update, my npm run dev is throwing a bunch of instances of one error:

TypeError: Cannot read property 'parseComponent' of undefined
at parse (node_modules/@vue/component-compiler-utils/dist/parse.js:14:23)
at Object.module.exports (node_modules/vue-loader/lib/index.js:67:22)
@ ./resources/js/routes/index.js 18:11-28
@ ./resources/js/sp.js
@ multi ./resources/js/sp.js

The errors are all the same except for one difference: the reference 18:11-28 for ./resources/js/routes/index.js is different for each file. It looks like each error corresponds to an () => import() statement.

I would definitely appreciate some assistance on this since it's crashing my project's entire build.

This package declares prettier in optionalDependencies:

I'm not sure if that was the intention, but when this @vue/component-compiler-utils is a dependency (or sub-dependency) in a given project, that optionalDependencies will be installed. And it's kinda pointless and unwanted to install prettier in my projects where I don't use it, I feel.

I know that I can use npm i --no-optional but that's a poor solution as nobody remembers to use it.

Also, I understand that it might not be desired to have prettier in peerDependencies as then it will trigger a warning when not installed.

Maybe just mention in the documentation that if you want to use prettier you have to add it manually?

Error when trying to install the package?

Our corporate compliance people have objections to us using projects without a full license text. It would be helpful if a license file could get added to this repo.

Expected behavior

Expect to locate the .styl file from node_modules with ~ (which works well when bundled with Webpack)

<style lang="stylus" scoped>
@import '~@my-pkg/style.styl'
</style>

Actual behavior

Get the error:

failed to locate @import file ~@my-pkg/style.styl
    at Evaluator.visitImport (C:\Users\dev\node_modules\stylus\lib\visitor\evaluator.js:915:21)
    ...
    ...
    ...

However, when I import the .styl file with relative path:

<style lang="stylus">
@import '../node_modules/@my-pkg/style.styl'
</style>

It works fine.

Steps to reproduce the behavior

My rollup config:

import vue from 'rollup-plugin-vue'
import typescript from 'rollup-plugin-typescript2'
import nodeResolve from 'rollup-plugin-node-resolve'
import commonjs from 'rollup-plugin-commonjs'
import json from 'rollup-plugin-json'

export default {
  input: 'src/index.vue',
  output: {
    format: 'esm',
    file: 'dist/bundle.esm.js'
  },
  plugins: [
    nodeResolve({
      jsnext: true,
      main: true
    }),
    commonjs(),
    json(),
    typescript({
      rollupCommonJSResolveHack: true,
      useTsconfigDeclarationDir: true
    }),
    vue()
  ]
}

// styleProcessors/index.ts
const less = {
  render(
    source: string,
    map: any | null,
    options: any
  ): StylePreprocessorResults {
    const nodeLess = require('less')

    let result: any
    let error: Error | null = null
    nodeLess.render(
      source,
      { syncImport: true },
      (err: Error | null, output: any) => {
        error = err
        result = output
      }
    )

    if (error) return { code: '', errors: [error] }

    if (map) {
      return {
        code: result.css.toString(),
        map: merge(map, result.map),
        errors: []
      }
    }

    return { code: result.css.toString(), errors: [] }
  }
}

Here, this options is not used in nodeLess.render, when i want to assign the paths param in render function.

As you can do in vue-loader allow using data options to avoid write in each component a set of sass variables https://vue-loader.vuejs.org/guide/pre-processors.html#sharing-global-variables

In this moment data options don't work because is used by scss.render function to provide to compiler the scss code https://github.com/vuejs/component-compiler-utils/blob/master/lib/styleProcessors/index.ts#L26

With the release of Prettier v2.x, projects wishing to update to the latest version will download both versions of Prettier due to this module having a hard dependency on v1.x.

Since Prettier is only require'd when prettify == true and NODE_ENV != "production", can this dependency be switched to an optionalDependency or peerDependency? Or perhaps its version requirement relaxed to include v2.x?

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