malformed styleRequest

[diachedelic]

Version

16.8.3

Reproduction link

github.com

Steps to reproduce

git clone [email protected]:diachedelic/vue-loader-repro.git \
    && cd vue-loader-repro/ \
    && npm install \
    && npx webpack

What 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(/^\?/, "&")}`

[diachedelic]

This also affects the script and template URLs.

[diachedelic]

Would a PR be appreciated?

[diachedelic]

Hello?

[diachedelic]

Fixed by #1911.