Ionic-app-scripts: [v1.3.12] Error: Cannot find module 'webpack'

[peterpeterparker]

Short description of the problem:

I did update to npm@5 and app-scripts from 1.3.7 to 1.3.12.
Deleted node_modules, did npm install and launched "ionic cordova build iOS --prod".

As a result I face following error:

[08:38:29]  webpack started ... 
There was an error in config file     "/Users/me/Documents/projects/myproject/scripts/webpack.config.js". Using defaults instead.
{ Error: Cannot find module 'webpack'
    at Function.Module._resolveFilename (module.js:470:15)
    at Function.Module._load (module.js:418:25)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/me/Documents/projects/myproject/scripts/webpack.config.js:2:15)
    at Module._compile (module.js:571:32)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3) code: 'MODULE_NOT_FOUND' }

I double checked, my local webpack.config.js is up-to-date, just contains one more line relative to momentjs.

Which @ionic/app-scripts version are you using?

1.3.12

Other information: (e.g. stacktraces, related issues, suggestions how to fix, stackoverflow links, forum links, etc)

global packages:

@ionic/cli-utils : 1.4.0
Cordova CLI      : 7.0.1 
Gulp CLI         : CLI version 1.2.2 Local version 3.9.1
Ionic CLI        : 3.4.0

local packages:

@ionic/app-scripts              : 1.3.12
@ionic/cli-plugin-cordova       : 1.4.0
@ionic/cli-plugin-gulp          : 1.0.1
@ionic/cli-plugin-ionic-angular : 1.3.1
Cordova Platforms               : android 6.2.3 ios 4.4.0
Ionic Framework                 : ionic-angular 3.5.0

System:

Node       : v7.2.1
OS         : macOS Sierra
Xcode      : Xcode 8.3.3 Build version 8E3004b 
ios-deploy : 1.9.0 
ios-sim    : 5.0.13 
npm        : 5.0.4

[janpio]

myproject is your Ionic project folder?
Where did scripts/webpack.config.js come from?

[peterpeterparker]

@janpio "myproject" is the name / root folder of my project

scripts/webpack.config.js is a clone of
https://github.com/ionic-team/ionic-app-scripts/blob/master/config/webpack.config.js with just one extra line, the following, to include only what I need for momentjs. Double checked, the file is up-to-date regarding the one in github

plugins: [
    ionicWebpackFactory.getIonicEnvironmentPlugin(),
    new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /a^/), // <--- my extra line
],

[janpio]

Does the build process work if you remove that file temporarily?

[peterpeterparker]

@janpio yep it do work when I remove this file, I mean the error comes from the line two of that script:

var webpack = require('webpack');

therefore if I remove it I don't get the error anymore.

maybe I should just install webpack (npm install webpack --save-dev) aka maybe was previously webpack delivered as a dependency but maybe since the update isn't that the case anymore?

[peterpeterparker]

exactly, if I do so, installing webpack as --save-dev, I don't face the error anymore

npm install webpack --save-dev

well I'm fine with that solution. thx @janpio

[janpio]

That's a workaround, not a solution - with the next checkout of your project you will have the same problem again. Normally webpack should have been installed with app-scripts: https://github.com/ionic-team/ionic-app-scripts/blob/master/package.json#L61 So something with your installation went probably wrong. Running npm install again should have fixed it.

[peterpeterparker]

@janpio I did remove node_modules and reinstall everything many time (npm install) none of these reinstallation solved the problem. seems webpack was never installed locally as a dependency

[janpio]

Check your package.json of your local app-scripts.

[peterpeterparker]

app-scripts:

   "webpack": "2.6.1"

that's weird

[peterpeterparker]

@janpio did a "rm -r node_modules" again (double checked everything is deleted) and then did again "npm install" (without webpack in my package.json) and again under

node_modules/@ionic/app-scripts/package.json

I found version

"webpack": "2.6.1"

and I double checked, it's 1.3.12 of app-scripts which is installed

[peterpeterparker]

it's correct actually, webpack 3.0.0 was introduced after 1.3.12

see

https://github.com/ionic-team/ionic-app-scripts/commit/27ac148e57a0c295ba8484e6b41478323c5f3cc8

[peterpeterparker]

I guess @janpio is right, it's just a workaround, would be cool to have a proper solution, therefore I reopen the issue

[janpio]

But isn't this correct if your app-scripts package.json requires a version of webpack? It should be installed then and you shouldn't get an error after npm install without additional work.

[peterpeterparker]

@janpio yes yes it's correct.

after npm install I could confirm that I found webpack under:

node_modules/@ionic/app-scripts/dist/webpack

so webpack is correctly installed but I still face the error (described in the issue above) when I run ionic cordova build whatever or ionic serve

[janpio]

But only with your custom scripts/webpack.config.js, correct?

[peterpeterparker]

Correct...but I mean "custom"...if I have exactly the same file as https://github.com/ionic-team/ionic-app-scripts/blob/master/config/webpack.config.js locally, I face the error too, so my custom line doesn't have to do with the error

So if I've got that in my package.json (of my project)

"config": {
    "ionic_webpack": "./scripts/webpack.config.js"
}

=> I face the error even if the local content of webpack.config.js is 100% the same as the one provided by app-scripts in GitHub

If I remove that config in my package.json, then I don't face the error

[janpio]

Can you reproduce this behaviour with a new project created with ionic start?

(Making it easier for the developer to reproduce the issue now)

[peterpeterparker]

@janpio thx for the idea. actually I could not reproduce the problem with a blank project, therefore I think there is conflict somewhere...gonna try to find out

[DavidStrausz]

If you rm -rf your node_modules directory try also removing package-lock.json and then run npm install again.

[janpio]

@DavidStrausz Was also wondering about that (privately) before... this lock file seems to "overwrite" package.json? If that is so, this makes a whole lot of documentation on the net obsolete :/

[DavidStrausz]

Yes thats the purpose of a package-lock.json. You can read more about this new functionality in npm 5.x here.

[peterpeterparker]

well @DavidStrausz good idea...I did it and now when I run ionic serve I've got like a thousand times following errors

[20:37:46]  transpile started ... 
[20:37:53]  typescript: node_modules/rxjs/add/observable/bindCallback.d.ts, line: 1 
        Invalid character.

[peterpeterparker]

@DavidStrausz @janpio I did it again (maybe a process was still attached somewhere whatever) and now it seems that freaking everything seems to be solved! Thx a lot guys for the help really appreciated!

So to solve the issue

rm package-lock.json 
rm -r node_modules
npm install

live, die, repeat till it works