Subscribe on changes!

Attribute fallthrough doesn't work in production mode if there's a comment in the child component's template

avatar
Jul 18th 2022

Vue version

3.2.37

Link to minimal reproduction

https://stackblitz.com/edit/github-1zqmjs?file=src%2FApp.vue

Steps to reproduce

None -- the demo should run automatically after a few seconds.

What is expected?

There should be a green border around the text.

What is actually happening?

There is no border.

System Info

No response

Any additional comments?

Development mode works fine. The issue seems to occur only with Webpack. I wasn't able to reproduce it in the SFC Playground.

To apply changes in the code or switch between development/production mode:

  • Open a new terminal.
  • Run npm run build:prod or npm run build:dev.
  • Refresh the preview window.
avatar
Jul 18th 2022

Normally, comments are removed in production to avoid this but for some reason the comments: false option is not applied by default with vue-loader. You can manually add it:

      {
        test: /\.vue$/,
        loader: "vue-loader",
        options: {
          compilerOptions: {
            comments: false,
          },
        },
      },

Note setting it to false will always remove them though. Not sure if this is a misalignment in vue loader. It also works in the playground

avatar
Sep 2nd 2022

Comments are always preserved during development.

But not for vue-loader it seems. The docs are inconsistent.