ERROR in Error: Child compilation failed: Cannot read property 'slice' of undefined

[malikzh]

Current behaviour 💣

i installed:

npm i html-webpack-plugin@5.0.0-alpha.17

and when i ran: webpack:

ERROR in   Error: Child compilation failed:
  Cannot read property 'slice' of undefined
  TypeError: Cannot read property 'slice' of undefined
  
  - pluginWebpack5.js:115 Object.resourceQuery [as fn]
    [emplanet]/[vue-loader]/dist/pluginWebpack5.js:115:47
  
  - RuleSetCompiler.js:99 execRule
    [emplanet]/[webpack]/lib/rules/RuleSetCompiler.js:99:21
  
  - RuleSetCompiler.js:118 execRule
    [emplanet]/[webpack]/lib/rules/RuleSetCompiler.js:118:6
  
  - RuleSetCompiler.js:137 Object.exec
    [emplanet]/[webpack]/lib/rules/RuleSetCompiler.js:137:6
  
  - NormalModuleFactory.js:403 
    [emplanet]/[webpack]/lib/NormalModuleFactory.js:403:34
  
  - NormalModuleFactory.js:116 
    [emplanet]/[webpack]/lib/NormalModuleFactory.js:116:11
  
  - NormalModuleFactory.js:544 
    [emplanet]/[webpack]/lib/NormalModuleFactory.js:544:8
  
  
  - Hook.js:18 Hook.CALL_ASYNC_DELEGATE [as _callAsync]
    [emplanet]/[tapable]/lib/Hook.js:18:14
  
  - NormalModuleFactory.js:542 
    [emplanet]/[webpack]/lib/NormalModuleFactory.js:542:8
  
  - child-compiler.js:159 
    [emplanet]/[html-webpack-plugin]/lib/child-compiler.js:159:18
  
  - Compiler.js:511 
    [emplanet]/[webpack]/lib/Compiler.js:511:11
  
  - Compiler.js:1059 
    [emplanet]/[webpack]/lib/Compiler.js:1059:17
  
  
  - Hook.js:18 Hook.CALL_ASYNC_DELEGATE [as _callAsync]
    [emplanet]/[tapable]/lib/Hook.js:18:14
  
  - Compiler.js:1055 
    [emplanet]/[webpack]/lib/Compiler.js:1055:33
  
  - Compilation.js:2119 
    [emplanet]/[webpack]/lib/Compilation.js:2119:10
  
  
  - Hook.js:18 Hook.CALL_ASYNC_DELEGATE [as _callAsync]
    [emplanet]/[tapable]/lib/Hook.js:18:14
  
  - Compilation.js:2112 
    [emplanet]/[webpack]/lib/Compilation.js:2112:37

Expected behaviour ☀️

the error shouldn't appear.

Reproduction Example 👾

1. install:

npm i html-webpack-plugin@5.0.0-alpha.17
npm i webpack@5.10.3

2. create webpack.config.js

module.exports = {
  entry: '...',
  output: {...},
  plugins: [
    new HtmlWebpackPlugin({
      title: 'asd',
      base: '/',
      template: path.join(__dirname, 'client', 'index.ejs'),
      meta: {
        viewport: 'width=device-width, initial-scale=1',
      },
      hash: true,
      favicon: './client/resources/image/favicon.ico',
    }),
  ]
};

Environment 🖥

my full package.json file:

{
  "name": "@empla/emplanet",
  "version": "0.3.0",
  "description": "Enterprise Management Platform",
  "main": "emplanet.js",
  "scripts": {
    "start": "node ./emplanet.server.js",
    "test": "echo \"Error: no test specified\"",
    "lint": "eslint server/**/*.js config.js emplanet.server.js emplanet.client.js client/**/*.js client/**/*.vue webpack.config.js",
    "lint-fix": "eslint --fix server/**/*.js config.js emplanet.server.js emplanet.client.js client/**/*.js client/**/*.vue webpack.config.js",
    "build": "NODE_ENV=production webpack --config ./webpack.config.js",
    "build-dev": "NODE_ENV=development webpack --config ./webpack.config.js",
    "watch": "NODE_ENV=development  webpack --config ./webpack.config.js --watch"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/empla/emplanet.git"
  },
  "keywords": [
    "empla",
    "enterprise",
    "management",
    "erp",
    "crm",
    "bpm"
  ],
  "author": "EMPLA GROUP, LLP",
  "license": "AGPL-3.0",
  "bugs": {
    "url": "https://github.com/empla/emplanet/issues"
  },
  "homepage": "https://github.com/empla/emplanet#readme",
  "dependencies": {
    "@babel/core": "7.12.10",
    "@babel/preset-env": "7.12.11",
    "@empla/coredi": "1.3.1",
    "@fortawesome/fontawesome-free": "5.15.1",
    "@fortawesome/fontawesome-svg-core": "1.2.32",
    "@fortawesome/free-brands-svg-icons": "5.15.1",
    "@fortawesome/free-regular-svg-icons": "5.15.1",
    "@fortawesome/free-solid-svg-icons": "5.15.1",
    "@vue/compiler-sfc": "3.0.4",
    "autoprefixer": "10.1.0",
    "axios": "0.21.0",
    "babel-loader": "8.2.2",
    "bcrypt": "5.0.0",
    "body-parser": "1.19.0",
    "bootstrap": "5.0.0-beta1",
    "clean-webpack-plugin": "3.0.0",
    "connect-history-api-fallback": "1.6.0",
    "core-js": "3.8.1",
    "css-loader": "5.0.1",
    "css-minimizer-webpack-plugin": "1.1.5",
    "express": "4.17.1",
    "express-fileupload": "1.2.0",
    "express-session": "1.17.1",
    "file-loader": "6.2.0",
    "html-webpack-plugin": "5.0.0-alpha.17",
    "json5": "2.1.3",
    "lodash": "4.17.20",
    "log4js": "6.3.0",
    "mini-css-extract-plugin": "1.3.3",
    "mongoose": "5.11.8",
    "postcss": "8.2.1",
    "postcss-loader": "4.1.0",
    "postcss-preset-env": "6.7.0",
    "regenerator-runtime": "0.13.7",
    "resolve-url-loader": "3.1.2",
    "sass": "1.30.0",
    "sass-loader": "10.1.0",
    "source-map-loader": "1.1.3",
    "style-loader": "2.0.0",
    "vue": "3.0.4",
    "vue-loader": "16.1.1",
    "vue-router": "4.0.1",
    "vue-style-loader": "4.1.2",
    "webpack": "5.10.3",
    "webpack-cli": "4.2.0"
  },
  "devDependencies": {
    "eslint": "7.15.0",
    "eslint-config-google": "0.14.0",
    "eslint-plugin-vue": "7.3.0"
  }
}

and full webpack.config.js:

const path = require('path');
const pkg = require('./package.json');
const webpack = require('webpack');

// Webpack plugins
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {VueLoaderPlugin} = require('vue-loader');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const autoprefixer = require('autoprefixer');

module.exports = {
  entry: './emplanet.client.js',
  output: {
    filename: 'emplanet.js',
    path: path.join(__dirname, 'public'),
    publicPath: '/',
  },
  plugins: [
    new CleanWebpackPlugin(),
    new webpack.DefinePlugin({
      EMPLANET_VERSION: JSON.stringify(pkg.version),
      EMPLANET_APPS: JSON.stringify(
          Object.keys(pkg.dependencies).filter((d) => d.match(
              /^(?:@[a-z0-9_\-\.]+\/)?emplanet\-[a-z0-9_\-\.]+$/gi))),
      __VUE_OPTIONS_API__: true,
      __VUE_PROD_DEVTOOLS__: false,
    }),
    new HtmlWebpackPlugin({
      title: 'EMPLANET v' + pkg.version,
      base: '/',
      template: path.join(__dirname, 'client', 'index.ejs'),
      meta: {
        viewport: 'width=device-width, initial-scale=1',
      },
      hash: true,
      favicon: './client/resources/image/favicon.ico',
    }),
    new VueLoaderPlugin(),
    new MiniCssExtractPlugin({
      filename: 'emplanet.css',
    }),
  ],
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
      },
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'resolve-url-loader',
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  'postcss-preset-env',
                  autoprefixer({
                    overrideBrowserslist: ['ie >= 10'],
                  }),
                ],
              },
            },
          }],
      },
      {
        test: /\.s[ac]ss$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader',
          'resolve-url-loader', {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  'postcss-preset-env',
                  autoprefixer({
                    overrideBrowserslist: ['ie >= 10'],
                  }),
                ],
              },
            },
          }, 'sass-loader'],
      },
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              outputPath: 'images',
            },
          },
        ],
      },
      {
        test: /\.(svg|woff2?|ttf|eot|otf)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              outputPath: 'fonts',
            },
          },
        ],
      },
      {
        test: /\.js$/,
        enforce: 'pre',
        use: ['source-map-loader'],
      },
    ],
  },
  resolve: {
    extensions: ['.js', '.vue'],
    alias: {
      'vue': 'vue/dist/vue.esm-bundler.js',
    },
  },
  optimization: {
    minimizer: [
      `...`,
      new CssMinimizerPlugin(),
    ],
  },
};

if i use 5.0.0-alpha.16, then there is no problem when calling webpack.

[joealden]

@malikzh please see #1527 (comment) and the comments that follow it (this is a known issue effecting 5.0.0-alpha.17).

[jantimon]

This issue needs to be fixed by vue-loader: vuejs/vue-loader#1771
@sodatea already said he will provide a fix if needed :)

[jantimon]

Fixed with vue-loader@16.1.2

[malikzh]

@jantimon Great thanks :)