when use vue-cli,and use <comment> Author: Name: Email: Github: Date: </comment> ,project is ok,but after add unplugin-turbo-console , project is error

[long36708]

Describe the bug

Module parse failed: Unexpected token (7:0)
File was processed with these loaders:

• ./node_modules/vue-loader/dist/index.js
• ./node_modules/unplugin/dist/webpack/loaders/transform.js
  You may need an additional loader to handle the result of these loaders.
  | Github:
  | Date:

ERROR in ./src/App.vue?vue&type=custom&index=0&blockType=comment (./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./node_modules/unplugin/dist/webpack/loaders/transform.js?unpluginName=unplugin-turbo-console!./src/App.vue?vue&type=custom&index=0&blockType=comment) 7:0
Module parse failed: Unexpected token (7:0)

Reproduction

https://github.com/long36708/vue-cli-project

System Info

System:
    OS: Windows 11 10.0.26100
    CPU: (16) x64 AMD Ryzen 7 PRO 4750U with Radeon Graphics
    Memory: 26.95 GB / 47.33 GB
  Binaries:
    Node: 18.20.0 - D:\dev\nodejs\node.EXE
    Yarn: 1.22.19 - D:\dev\nvm\node_global\yarn.CMD
    npm: 10.5.0 - D:\dev\nodejs\npm.CMD
    pnpm: 8.15.5 - D:\dev\nvm\node_global\pnpm.CMD
  Browsers:
    Edge: Chromium (125.0.2535.67)
    Internet Explorer: 11.0.26100.1

Used Package Manager

npm

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• The provided reproduction is a minimal reproducible of the bug.

[yuyinws]

It looks like a upstream bug from unplugin. I will keep tracking it.

[yuyinws]

There is a workaround, Add a custom loader to handle comment block:

vue.config.js

  configureWebpack: {
    plugins: [
      require("unplugin-turbo-console/webpack").default({
        /* options here */
      }),
    ],
+    module: {
+     rules: [
+       {
+         resourceQuery: /blockType=comment/,
+         loader: require.resolve("./comment-loader"),
+       },
+     ],
+   },
  },

comment-loader.js

  module.exports = function (source, map) {
    this.callback(null, `export default () => {}`, map);
  };

[long36708]

Thank you! I have replaced with <--> because i think it is not normal.But i don't know why only use vue-cli and unplugin-turbo-console project will error

[yuyinws]

In fact, every unplugin-based packages and have transform hook will have this problem.

This seems to be caused by unplugin taking over the transform hook of webpack.

@sxzz, Hi, here is the minimal reproduction, you can take a look if have time. I'm not sure
if unplugin core should handle this situation.

[sxzz]

This is the designed behavior of vue-loader: if there is a loader that can parse custom blocks, vue-loader will not transform the custom block into javascript. See https://github.com/vuejs/vue-loader/blob/698636508e08f5379a57eaf086b5ff533af8e051/src/index.ts#L345-L356

Solution:

transformInclude(id) {
  return id.includes('.vue') && !id.includes('blockType')
},