vue-loader crashes build if used together with html-webpack-plugin@next

[jantimon]

Version

vue-loader: 16.1.1
html-webpack-plugin: 5.0.0-alpha.17

Reproduction link

https://codesandbox.io/s/html-webpack-plugin-5x-alpha-vue-6n1ub?file=/webpack.config.js:0-360

Steps to reproduce

Install the html-webpack-plugin@5.0.0-alpha.17 and run the following webpack config

Code:

const HtmlWebpackPlugin = require("html-webpack-plugin");
const VueLoaderPlugin = require("vue-loader/lib/plugin");

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: "vue-loader"
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin()
  ]
};

What is happening?

I am not even using a .vue file in my project but the loader is kicking in and crashes the child compilation of the html-webpack-plugin with the following trace:

Error: Child compilation failed:\n' +
        "  Cannot read property 'slice' of undefined\n" +
        "  TypeError: Cannot read property 'slice' of undefined\n" +
        '  \n' +
        '  - plugin-webpack5.js:123 Object.resourceQuery [as fn]\n'
+
        '    [platform]/[vue-loader]/lib/plugin-webpack5.js:123:39\n
' +
        '  \n' +
        '  - RuleSetCompiler.js:99 execRule\n' +
        '    [platform]/[webpack]/lib/rules/RuleSetCompiler.js:99:21

So it looks like query is empty in

vue-loader/lib/plugin-webpack5.js

Line 123 in 7402077

const parsed = qs.parse(query.slice(1))

Any idea why the vue-loader is having issues here?
It worked fine with html-webpack-plugin@5.0.0-alpha.16

Maybe using thisCompilation instead of compilation could fix it:

vue-loader/lib/plugin-webpack5.js

Line 35 in 7402077

compiler.hooks.compilation.tap(id, compilation => {

However switching to thisCompilation might break the vue file compilation in childcompilers e.g. for ssr in the html-webpack-plugin similar to this react jsx example: https://codesandbox.io/s/html-webpack-plugin--jsx-sjbcq

[sodatea]

A quick debugging shows that this line triggers it: jantimon/html-webpack-plugin@0cd156c#diff-22815e8839560dd9537e55a071392863103a6e02ed6f6d2580ed779e8296e012R117

[jantimon]

@sodatea correct - maybe the vue-loader doesn't work well with the new webpack 5 data:text/javascript inline scripts

[jantimon]

@sodatea I could reproduce the bug without the html-webpack-plugin:

const VueLoaderPlugin = require("vue-loader/lib/plugin");

module.exports = {
  entry: {
    main: 'data:text/javascript,console.log("hello world");'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: "vue-loader"
      }
    ]
  },
  plugins: [new VueLoaderPlugin()]
};

ERROR in Cannot read property 'slice' of undefined

here is a new codesandbox:

https://codesandbox.io/s/vue-loader-inline-script-wbfcz?file=/webpack.config.js

[sodatea]

🤔 The newly added data: request protocol does not have a resourceQuery property. Therefore the vue-loader plugin's assumption that there's always a query string (either empty or starting with ?) fails.

This is in contradiction with webpack's type declarations https://github.com/webpack/webpack/blob/10ad4e95b850bbe20019275fd1d364666c4b69ea/declarations/WebpackOptions.d.ts#L243
So I think it's their bug.

It's easy to work around this issue in vue-loader though, so I'd like to ship a quick fix anyway.

[jantimon]

Thanks @sodatea 👍

In that case should we create a ticket for webpack/webpack ?

[sodatea]

Yeah I think so

[jantimon]

Done: webpack/webpack#12214

[jantimon]

in webpack/webpack#12214 @sokra explains why he would prefer to keep the current behaviour and to adjust the typings in webpack - could you please add support for undefined in that case?

[jantimon]

Cool thanks @sodatea 👍