Ionic 4 upgrade – Cannot find module ‘webpack’ gotcha

A very quick one, mostly for my future reference, regarding a gotcha with the current process of upgrading to Ionic 4 (now at its first Release Candidate).

I had an app to upgrade from Ionic 3. Like, I suspect, many people doing this, I decided to keep my files in-place so it was easier to keep a useful version control history, while cross-referencing the Conference demo app‘s recent changes, the starter templates and another small app I created on Ionic 4 from the start.

I’d also installed and used the linting package designed to highlight likely issues when upgrading. Unfortunately this turned out to be my downfall when also using the very latest versions of other packages, including moving from @ionic/ng-toolkit + the Ionic schematics helper to the new @ionic/angular-toolkit as described here.

I was getting:

$ ionic build
> ng run app:build
Cannot find module 'webpack'
Error: Cannot find module 'webpack'
at Function.Module._resolveFilename (module.js:547:15)
at Function.Module._load (module.js:474:25)
at Module.require (module.js:596:17)
at require (internal/module.js:11:18)
at Object.<anonymous> (/Users/noel/files/Dev/When.fm/Client/node_modules/@angular-devkit/build-webpack/src/webpack/index.js:6:17)
at Module._compile (module.js:652:30)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)
[ERROR] An error occurred while running subprocess ng.

ng run app:build exited with exit code 1.

I wasn’t clear why Webpack was relevant, but suspected use of a custom Webpack loader in my previous tests was somehow interfering with the normal (non-test) build toolchain.

Because of this suspicion I also tried explicitly adding Webpack as a dependency, but this led to a different ContextElementDependency error, resulting from an apparent clash between multiple Webpack binaries.

I now think my own Webpack use was a red herring. Upon removing the dev dependency on v4-migration-tslint, everything worked! So as useful as it is in initially checking your code for required markup & TypeScript updates, it seems this is definitely not a package to keep around for longer than necessary.

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.