I have a problem since I upgraded from version node (8 -> 14) and npm (6 -> 7). Now when I run the following command:
npm run watch
I have the following error:
[webpack-cli] Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
- configuration.optimization.splitChunks should be one of these:
false | object { automaticNameDelimiter?, automaticNameMaxLength?, cacheGroups?, chunks?, enforceSizeThreshold?, fallbackCacheGroup?, filename?, hidePathInfo?, maxAsyncRequests?, maxInitialRequests?, maxSize?, minChunks?, minSize?, name? }
-> Optimize duplication and caching by splitting chunks by shared modules and cache group
Details:
* configuration.optimization.splitChunks.cacheGroups['styles-public\css\web\***\app'] has an unknown property 'type'. These properties are valid:
object { automaticNameDelimiter?, automaticNameMaxLength?, automaticNamePrefix?, chunks?, enforce?, enforceSizeThreshold?, filename?, maxAsyncRequests?, maxInitialRequests?, maxSize?, minChunks?, minSize?, name?, priority?, reuseExistingChunk?, test? }
* configuration.optimization.splitChunks.cacheGroups['styles-public\css\pro\***\app'] has an unknown property 'type'. These properties are valid:
object { automaticNameDelimiter?, automaticNameMaxLength?, automaticNamePrefix?, chunks?, enforce?, enforceSizeThreshold?, filename?, maxAsyncRequests?, maxInitialRequests?, maxSize?, minChunks?, minSize?, name?, priority?, reuseExistingChunk?, test? }
- configuration.output.chunkFilename should be a string.
-> The filename of non-entry chunks as relative path inside the `output.path` directory.
- configuration.stats has an unknown property 'preset'. These properties are valid:
object { all?, assets?, assetsSort?, builtAt?, cached?, cachedAssets?, children?, chunkGroups?, chunkModules?, chunkOrigins?, chunks?, chunksSort?, colors?, context?, depth?, entrypoints?, env?, errorDetails?, errors?, exclude?, excludeAssets?, excludeModules?, hash?, logging?, loggingDebug?, loggingTrace?, maxModules?, moduleAssets?, moduleTrace?, modules?, modulesSort?, nestedModules?, optimizationBailout?, outputPath?, performance?, providedExports?, publicPath?, reasons?, source?, timings?, usedExports?, version?, warnings?, warningsFilter? }
npm ERR! code 2
npm ERR! path C:\wamp64\www\app
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js --watch
I deleted my node_modules directory. I reinstalled everything. I still have the error. Do you know where it can come from?
See my package.json file and my webpack.mix.js file below.
package.json
{
"name": "app",
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"cross-env": "^7.0.3",
"jquery": "^3.5.1",
"laravel-mix": "^6.0.13",
"lodash": "^4.17.15",
"opn": "^6.0.0",
"popper.js": "^1.16.1",
"postcss": "^8.1.14",
"resolve-url-loader": "^3.1.2",
"sass": "^1.26.8",
"sass-loader": "^7.3.1",
"vue-template-compiler": "^2.6.11",
"webpack": "^4.46.0",
"webpack-cli": "^4.5.0",
"webpack-serve": "^3.2.0"
},
"dependencies": {
"@ckeditor/ckeditor5-build-classic": "^20.0.0",
"@ckeditor/ckeditor5-image": "^20.0.0",
"@ckeditor/ckeditor5-vue": "^1.0.1",
"@fortawesome/fontawesome-free": "^5.15.2",
"@fortawesome/fontawesome-svg-core": "^1.2.34",
"@fortawesome/free-solid-svg-icons": "^5.15.2",
"@fortawesome/vue-fontawesome": "^2.0.2",
"@fullcalendar/bootstrap": "^5.3.0",
"@fullcalendar/core": "^5.3.0",
"@fullcalendar/daygrid": "^5.3.0",
"@fullcalendar/interaction": "^5.3.0",
"@fullcalendar/timegrid": "^5.3.0",
"@fullcalendar/vue": "^5.3.0",
"axios": "^0.21.1",
"bootstrap": "^4.6.0",
"bootstrap-vue": "^2.15.0",
"es6-promise": "^4.2.8",
"fullcalendar": "^5.1.0",
"mapbox-gl": "^0.53.1",
"moment": "^2.27.0",
"npm": "^7.6.3",
"v-calendar": "^1.0.0-beta.23",
"vee-validate": "^3.3.7",
"vue": "^2.6.12",
"vue-analytics": "^5.22.1",
"vue-i18n": "^8.23.0",
"vue-mapbox": "^0.4.1",
"vue-phone-number-input": "^1.1.10",
"vue-recaptcha": "^1.3.0",
"vue-router": "^3.3.4",
"vue-select": "^3.11.2",
"vue-swatches": "^2.1.0",
"vuex": "^3.5.1",
"vuex-persist": "^2.2.0"
}
}
webpack.mix.js
const mix = require('laravel-mix');
const path = require('path');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix
.js('resources/js/app.js', 'public/js')
.webpackConfig({
resolve: {
alias: {
'@components': path.resolve(__dirname, 'resources/js/components/'),
'@router': path.resolve(__dirname, 'resources/js/router/'),
'@store': path.resolve(__dirname, 'resources/js/store/')
}
}
});
Thank you.
