Html-webpack-plugin: ERROR in Error: Child compilation failed: Cannot read property 'slice' of undefined
Current behaviour 💣
i installed:
npm i [email protected]
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 👾
- install:
npm i [email protected]
npm i [email protected]
- 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.
malikzh
All 4 comments
@malikzh please see https://github.com/jantimon/html-webpack-plugin/issues/1527#issuecomment-745674331 and the comments that follow it (this is a known issue effecting 5.0.0-alpha.17).
joealden
on 16 Dec 2020
👍1
This issue needs to be fixed by vue-loader: https://github.com/vuejs/vue-loader/issues/1771
@sodatea already said he will provide a fix if needed :)
jantimon
on 16 Dec 2020
👍1
Fixed with [email protected]
jantimon
on 17 Dec 2020
👍1
@jantimon Great thanks :)
malikzh
on 17 Dec 2020
Was this page helpful?
0 / 5 - 0 ratings
Related issues
rokoroku
·
3Comments
NeverwinterMoon
·
3Comments
ruoyiqing
·
3Comments
yyx990803
·
4Comments
klinki
·
3Comments