Ionic 4: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema - ionic-framework

Question

i have a problem with my ionic 4 app. If I use ng serve or other commands as to one to build I have the following error. This error happens after a npm install. I think is related to some new versions of dependencies but I don't know which one.
Here my package.json:
{
"name": "example",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "https://ionicframework.com/",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"run:ios": "ionic cordova run ios -l",
"run:browser": "ionic cordova run browser -l --live-reload",
"run:android": "ionic cordova emulate android -l",
"run:android_real_dev": "ionic cordova run android -l",
"build:ios:aot": "ionic cordova build ios --aot --minifyjs --minifycss --releas",
"build:ios:prod": "ionic cordova build ios --prod",
"build:browser:aot": "ionic cordova build browser --aot --minifyjs --minifycss --releas",
"build:android:aot": "ionic cordova build android --aot --minifyjs --minifycss --releas",
"build:android:prod": "ionic cordova build android --prod"
},
"private": true,
"dependencies": {
"#agm/core": "^1.0.0-beta.5",
"#angular/common": "^7.2.2",
"#angular/core": "^7.2.2",
"#angular/forms": "^7.2.2",
"#angular/http": "^7.2.2",
"#angular/platform-browser": "^7.2.2",
"#angular/platform-browser-dynamic": "^7.2.2",
"#angular/router": "^7.2.2",
"#ionic-native/call-number": "^5.2.0",
"#ionic-native/core": "^5.0.0",
"#ionic-native/dialogs": "^5.2.0",
"#ionic-native/file": "^5.3.0",
"#ionic-native/geolocation": "^5.2.0",
"#ionic-native/image-picker": "^5.2.0",
"#ionic-native/launch-navigator": "^5.2.0",
"#ionic-native/native-geocoder": "^5.2.0",
"#ionic-native/social-sharing": "^5.3.0",
"#ionic-native/splash-screen": "^5.0.0",
"#ionic-native/status-bar": "^5.0.0",
"#ionic/angular": "^4.1.0",
"#ionic/app-scripts": "^3.2.3",
"#ionic/storage": "^2.2.0",
"#ngx-translate/core": "^11.0.1",
"#ngx-translate/http-loader": "^4.0.0",
"agm-direction": "^0.7.6",
"balanced-match": "^1.0.0",
"call-number": "1.0.1",
"color": "^3.1.0",
"cordova-android": "8.0.0",
"cordova-browser": "5.0.4",
"cordova-ios": "5.0.1",
"cordova-plugin-actionsheet": "^2.3.3",
"cordova-plugin-add-swift-support": "1.7.2",
"cordova-plugin-device": "^2.0.2",
"cordova-plugin-dialogs": "2.0.1",
"cordova-plugin-file": "~6.0.1",
"cordova-plugin-geolocation": "4.0.1",
"cordova-plugin-ionic-keyboard": "^2.1.3",
"cordova-plugin-ionic-webview": "^3.1.2",
"cordova-plugin-nativegeocoder": "3.2.1",
"cordova-plugin-splashscreen": "^5.0.2",
"cordova-plugin-statusbar": "^2.4.2",
"cordova-plugin-telerik-imagepicker": "2.2.4",
"cordova-plugin-whitelist": "^1.3.3",
"cordova-plugin-x-socialsharing": "5.4.4",
"core-js": "^2.5.4",
"es6-promise-plugin": "4.2.2",
"hammerjs": "^2.0.8",
"ionic-cache": "^4.0.1",
"ionic-swipe-all": "^1.3.0",
"mx.ferreyra.callnumber": "~0.0.2",
"rxjs": "~6.3.3",
"uk.co.workingedge.phonegap.plugin.launchnavigator": "5.0.4",
"zone.js": "~0.8.29"
},
"devDependencies": {
"#angular-devkit/architect": "~0.12.3",
"#angular-devkit/build-angular": "~0.13.0",
"#angular-devkit/core": "~7.2.3",
"#angular-devkit/schematics": "~7.2.3",
"#angular/cli": "~7.3.1",
"#angular/compiler": "~7.2.2",
"#angular/compiler-cli": "~7.2.2",
"#angular/language-service": "~7.2.2",
"#ionic/angular-toolkit": "~1.4.0",
"#types/color": "^3.0.0",
"#types/jasmine": "~2.8.8",
"#types/jasminewd2": "~2.0.3",
"#types/node": "~10.12.0",
"codelyzer": "~4.5.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~3.1.4",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"ts-node": "~8.0.0",
"tslint": "~5.12.0",
"typescript": "~3.1.6"
},
"description": "A Custom Listing App project",
"cordova": {
"plugins": {
"cordova-plugin-whitelist": {},
"cordova-plugin-statusbar": {},
"cordova-plugin-device": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-ionic-webview": {},
"cordova-plugin-ionic-keyboard": {},
"cordova-plugin-dialogs": {},
"mx.ferreyra.callnumber": {},
"uk.co.workingedge.phonegap.plugin.launchnavigator": {
"GOOGLE_API_KEY_FOR_ANDROID": "...",
"LOCATION_USAGE_DESCRIPTION": "This app requires access to your location for navigation purposes",
"OKHTTP_VERSION": "3.12.0"
},
"cordova-plugin-telerik-imagepicker": {
"PHOTO_LIBRARY_USAGE_DESCRIPTION": " "
},
"cordova-plugin-geolocation": {},
"cordova-plugin-nativegeocoder": {
"LOCATION_WHEN_IN_USE_DESCRIPTION": "Use geocoder service"
},
"cordova-plugin-x-socialsharing": {
"ANDROID_SUPPORT_V4_VERSION": "24.1.1+"
},
"cordova-plugin-file": {}
},
"platforms": [
"browser",
"android",
"ios"
]
}
}
And the error is:
Cannot destructure property `createHash` of 'undefined' or 'null'.
TypeError: Cannot destructure property `createHash` of 'undefined' or 'null'.
at Object.<anonymous> (/Users/asd/WebstormProjects/customlistingapp/node_modules/mini-css-extract-plugin/dist/index.js:21:5)
at Module._compile (internal/modules/cjs/loader.js:702:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:713:10)
at Module.load (internal/modules/cjs/loader.js:612:32)
at tryModuleLoad (internal/modules/cjs/loader.js:551:12)
at Function.Module._load (internal/modules/cjs/loader.js:543:3)
at Module.require (internal/modules/cjs/loader.js:650:17)
at require (internal/modules/cjs/helpers.js:20:18)
at Object.<anonymous> (/Users/asd/WebstormProjects/customlistingapp/node_modules/mini-css-extract-plugin/dist/cjs.js:3:18)
at Module._compile (internal/modules/cjs/loader.js:702:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:713:10)
at Module.load (internal/modules/cjs/loader.js:612:32)
at tryModuleLoad (internal/modules/cjs/loader.js:551:12)
at Function.Module._load (internal/modules/cjs/loader.js:543:3)
at Module.require (internal/modules/cjs/loader.js:650:17)
at require (internal/modules/cjs/helpers.js:20:18)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! example#0.0.1 start: `ng serve`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the example#0.0.1 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/asd/.npm/_logs/2019-04-30T10_34_47_445Z-debug.log
I tried to install webpack or the plugin asked locally but the error is the next one. I don't know what to do because I can't run my app neither build it.
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
- configuration has an unknown property 'optimization'. These properties are valid:
object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry, externals?, loader?, module?, name?, node?, output?, parallelism?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, stats?, target?, watch?, watchOptions? }
For typos: please correct them.
For loader options: webpack 2 no longer allows custom properties in configuration.
Loaders should be updated to allow passing options via loader options in module.rules.
Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader:
plugins: [
new webpack.LoaderOptionsPlugin({
// test: /\.xxx$/, // may apply this only for some modules
options: {
optimization: ...
}
})
]
- configuration.output has an unknown property 'futureEmitAssets'. These properties are valid:
object { auxiliaryComment?, chunkFilename?, crossOriginLoading?, jsonpScriptType?, chunkLoadTimeout?, devtoolFallbackModuleFilenameTemplate?, devtoolLineToLine?, devtoolModuleFilenameTemplate?, filename?, hashDigest?, hashDigestLength?, hashFunction?, hashSalt?, hotUpdateChunkFilename?, hotUpdateFunction?, hotUpdateMainFilename?, jsonpFunction?, library?, libraryTarget?, libraryExport?, path?, pathinfo?, publicPath?, sourceMapFilename?, sourcePrefix?, strictModuleExceptionHandling?, umdNamedDefine? }
-> Options affecting the output of the compilation. `output` options tell webpack how to write the compiled files to disk.
WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
- configuration has an unknown property 'optimization'. These properties are valid:
object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry, externals?, loader?, module?, name?, node?, output?, parallelism?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, stats?, target?, watch?, watchOptions? }
For typos: please correct them.
For loader options: webpack 2 no longer allows custom properties in configuration.
Loaders should be updated to allow passing options via loader options in module.rules.
Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader:
plugins: [
new webpack.LoaderOptionsPlugin({
// test: /\.xxx$/, // may apply this only for some modules
options: {
optimization: ...
}
})
]
- configuration.output has an unknown property 'futureEmitAssets'. These properties are valid:
object { auxiliaryComment?, chunkFilename?, crossOriginLoading?, jsonpScriptType?, chunkLoadTimeout?, devtoolFallbackModuleFilenameTemplate?, devtoolLineToLine?, devtoolModuleFilenameTemplate?, filename?, hashDigest?, hashDigestLength?, hashFunction?, hashSalt?, hotUpdateChunkFilename?, hotUpdateFunction?, hotUpdateMainFilename?, jsonpFunction?, library?, libraryTarget?, libraryExport?, path?, pathinfo?, publicPath?, sourceMapFilename?, sourcePrefix?, strictModuleExceptionHandling?, umdNamedDefine? }
-> Options affecting the output of the compilation. `output` options tell webpack how to write the compiled files to disk.
at webpack (/Users/asd/WebstormProjects/customlistingapp/node_modules/webpack/lib/webpack.js:19:9)
at WebpackBuilder.createWebpackCompiler (/Users/asd/WebstormProjects/customlistingapp/node_modules/#angular-devkit/build-webpack/src/webpack/index.js:20:16)
at Observable.rxjs_1.Observable.obs [as _subscribe] (/Users/asd/WebstormProjects/customlistingapp/node_modules/#angular-devkit/build-webpack/src/webpack/index.js:24:42)
at Observable._trySubscribe (/Users/asd/WebstormProjects/customlistingapp/node_modules/rxjs/internal/Observable.js:44:25)
at Observable.subscribe (/Users/asd/WebstormProjects/customlistingapp/node_modules/rxjs/internal/Observable.js:30:22)
at /Users/asd/WebstormProjects/customlistingapp/node_modules/rxjs/internal/util/subscribeTo.js:22:31
at Object.subscribeToResult (/Users/asd/WebstormProjects/customlistingapp/node_modules/rxjs/internal/util/subscribeToResult.js:10:45)
at MergeMapSubscriber._innerSub (/Users/asd/WebstormProjects/customlistingapp/node_modules/rxjs/internal/operators/mergeMap.js:82:29)
at MergeMapSubscriber._tryNext (/Users/asd/WebstormProjects/customlistingapp/node_modules/rxjs/internal/operators/mergeMap.js:76:14)
at MergeMapSubscriber._next (/Users/asd/WebstormProjects/customlistingapp/node_modules/rxjs/internal/operators/mergeMap.js:59:18)
at MergeMapSubscriber.Subscriber.next (/Users/asd/WebstormProjects/customlistingapp/node_modules/rxjs/internal/Subscriber.js:67:18)
at MergeMapSubscriber.notifyNext (/Users/asd/WebstormProjects/customlistingapp/node_modules/rxjs/internal/operators/mergeMap.js:92:26)
at InnerSubscriber._next (/Users/asd/WebstormProjects/customlistingapp/node_modules/rxjs/internal/InnerSubscriber.js:28:21)
at InnerSubscriber.Subscriber.next (/Users/asd/WebstormProjects/customlistingapp/node_modules/rxjs/internal/Subscriber.js:67:18)
at MergeMapSubscriber.notifyNext (/Users/asd/WebstormProjects/customlistingapp/node_modules/rxjs/internal/operators/mergeMap.js:92:26)
at InnerSubscriber._next (/Users/asd/WebstormProjects/customlistingapp/node_modules/rxjs/internal/InnerSubscriber.js:28:21)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! example#0.0.1 build: `ng build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the example#0.0.1 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/asd/.npm/_logs/2019-04-30T10_27_10_155Z-debug.log