vue-loader icon indicating copy to clipboard operation
vue-loader copied to clipboard

Vue Loader 15.10.0 returns the whole Vue file for template query

Open zfeher opened this issue 3 years ago • 2 comments

Version

15.10.0

Reproduction link

github.com

Steps to reproduce

1, clone the repo 2, npm install 3, npm run webpack

What is expected?

On the console we should see only the content of the

What is actually happening?

On the console we see the content of the whole Vue file.


Trying Vue 2.7.6 and Vue Loader 15.10.0 in our project we noticed that Vue Loader returns the whole vue file (with template query).

This caused an interesting issue in our project where a html-loader is configured to run on the template part. The issue was that html-loader tried to minify CSS found in the <style> tag. This worked with most of our components except two (nested ::v-deep, &::before things).

Managed to create a minimal repo where this can be observed, instructions described there: Minimal repo

zfeher avatar Jul 15 '22 11:07 zfeher

In the meanwhile we found an alternative fix for this. If we move the resourceQuery: /vue.*type=template/, rule before the vue-loader rule in webpack config it works correctly/in order.

(This made our webpack config a bit more bloated because we use a html-loader in a rule for .html files and in another rule one for vue templates combined with oneOf. With 15.10.0 this doesn't work because the vue template rule should be before the vue-loader rule and the .html rule should be after :))

It seems the order of the rules matter in 15.10.0. Checking the diff between 15.10.0 and 15.9.8 we couldn't find what went wrong or why the 15.9.8 version works with similar code regarding the loaders.

zfeher avatar Jul 18 '22 13:07 zfeher

Same issue here. After an NPM install it automatically upgraded to version 15.10.0 which broke all of our build processes for every website. We reverted it to 15.9.8 for now, hope to see this fixed soon! :)

roylaveto avatar Jul 19 '22 11:07 roylaveto