malformed styleRequest #1904
Description
Version
16.8.3
Reproduction link
Steps to reproduce
git clone git@github.com:diachedelic/vue-loader-repro.git \
&& cd vue-loader-repro/ \
&& npm install \
&& npx webpackWhat is expected?
The build to succeed, like it does using vue-loader v15.
What is actually happening?
The build fails, because vue-loader v16 produces an invalid query string for the styleRequest. Notice that the query string contains two "?" characters:
ERROR in ./src/app.vue?vue&type=style&index=0&id=5ef48958&lang=css?variant=debug (./node_modules/vue-loader/dist??ref--7-0!./src/app.vue?vue&type=style&index=0&id=5ef48958&lang=css?variant=debug) 2:7
Module parse failed: Unexpected token (2:7)
File was processed with these loaders:
* ./node_modules/vue-loader/dist/index.js
You may need an additional loader to handle the result of these loaders.
|
> button {
| display: none;
| }
@ ./src/app.vue?vue&type=style&index=0&id=5ef48958&lang=css?variant=debug 1:0-147 1:0-147 1:148-284 1:148-284
@ ./src/app.vue?variant=debug
@ ./src/main.js
The problem arises only when using custom Webpack resolver plugins. It is fixed by changing this line in vue-loader:
-const query = `?vue&type=style&index=${i}${idQuery}${inlineQuery}${attrsQuery}${resourceQuery}`
+const query = `?vue&type=style&index=${i}${idQuery}${inlineQuery}${attrsQuery}${resourceQuery.replace(/^\?/, "&")}`