HTML Comments in template root are breaking components functionality with compiler option whitespace: "preserve" - Githubissues

vuejs / vue-loader

📦 Webpack loader for Vue.js components

MIT License

4.99k stars 914 forks source link

HTML Comments in template root are breaking components functionality with compiler option whitespace: "preserve" #2019

Open bartoszrudzinski opened 1 year ago

bartoszrudzinski commented 1 year ago

Version

17.0.1

Reproduction link

https://github.com/bartoszrudzinski/vue-loader-bug

Steps to reproduce

Copy repository, type npm install and npm run serve to check. To "test" it remove comments from TestComponent and TestComponentWithTransition components and check behaviour.

What is actually happening?

When using compilerOptions: { whitespace: "preserve" } vue-loader option HTML comments are breaking functionality of components:

"class" attribute is not being passed from parent to child properly when there is a comment in the child template root
transition components using slots are not being rendered at all

Those are two found by me. There can be more related issues.

What is expected?

Comments are not breaking functionality of components.

With HTML comments in the code:

Without HTML comments in the code:

vzotov commented 1 year ago

I've got the same issue. Ended up adding comments: false to vue-loader compilerOptions

module: {
  rules: [
    {
      test: /\.vue$/,
      use: [
        {
          loader: 'vue-loader',
          options: {
            compilerOptions: {
              comments: false
            }
          }
        }
      ]
    }
  ]
}

But I'm not sure if it is a loader's issue I found this in the vue source code https://github.com/vuejs/core/blob/2a9e9a40963a852238adc4c61b86d0c48e7131fa/packages/runtime-core/src/componentRenderUtils.ts#L122

    // attr merging
    // in dev mode, comments are preserved, and it's possible for a template
    // to have comments along side the root element which makes it a fragment

seems they added a condition for development environment but if you have comments in production you will have this problem

at least vue-loader should warn developers that root level comments are not welcome