Ionic-app-scripts: 2.0.0 version getting error Missing ModuleConcatenationPlugin when using custom config

[masimplo]

Note: for support questions, please use one of these channels:

https://forum.ionicframework.com/
http://ionicworldwide.herokuapp.com/

Short description of the problem:

When using custom webpack.config I am getting error ModuleConcatenationPlugin not found. Looking through webpack/lib/optimize/ I cannot find ModuleConcatenationPlugin.js file. Webpack version is 2.2.1 inside my node_modules and 3.1.0 inside app-scripts node_modules

I see that inside @ionic/app-scipts/node_modules you have webpack 3.1.0, but overring the config is using the myApp/node_modules/webpack which is a different version (not sure how this got there, I do not have it as a direct dependency). Somehow the require in the custom config is not using the ionic bundled one but the other one.

What behavior are you expecting?

Steps to reproduce:

1. Copy default webpack.config.js to project
2. Set relevant package.json config to point to "custom" web config
3. Run anything triggering webpack build

Only thing I am adding in custom config is inside plugins:

    new webpack.EnvironmentPlugin({
      'NODE_ENV': 'uat'
    }),

Which @ionic/app-scripts version are you using?
just tried nightly after 2.0.0

global packages:
@ionic/cli-utils : 1.4.0
Cordova CLI : 7.0.1
Ionic CLI : 3.4.0

local packages:
@ionic/app-scripts : 2.0.0-201707102058
@ionic/cli-plugin-cordova : 1.4.0
@ionic/cli-plugin-ionic-angular : 1.3.1
Cordova Platforms : android 6.2.3
Ionic Framework : ionic-angular 3.5.0

System:

Node       : v7.10.0
OS         : macOS Sierra
Xcode      : Xcode 8.3.3 Build version 8E3004b
ios-deploy : not installed
ios-sim    : not installed
npm        : 5.0.4

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

{ Error: Cannot find module 'webpack/lib/optimize/ModuleConcatenationPlugin'
    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/michael/Repos/covve.Ionic2/webpack.config.js:6:26)
    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' }

[ztecharoberts]

I had to point to the ionic node_module
var ModuleConcatPlugin = require('@ionic/app-scripts/node_modules/webpack/lib/optimize/ModuleConcatenationPlugin');

or you could install your own version and just reference it.

[danbucholtz]

Why would there be two different versions of webpack, though? That is strange. Do we know what else is introducing a dependency on webpack?

Thanks,
Dan

[danbucholtz]

Can you post your package.json content?

Thanks,
Dan

[HugoHeneault]

I have the same issue. Using this webpack.config.js:

// Set the `ENV` global variable to be used in the app.
var path    = require('path');
var webpack = require('webpack');

var projectRootDir = process.env.IONIC_ROOT_DIR;
var appScriptsDir  = process.env.IONIC_APP_SCRIPTS_DIR;

var config = require(path.join(appScriptsDir, 'config', 'webpack.config.js'));

var env = process.env.IONIC_ENV || 'dev';
var envVars;
try {
  envVars = require(path.join(projectRootDir, 'env', env + '.json'));
} catch (e) {
  envVars = {};
}

config.plugins = config.plugins || [];
config.plugins.push(
  new webpack.DefinePlugin({
    ENV: Object.assign(envVars, {
      environment: JSON.stringify(env)
    })
  })
);

if (env === 'prod') {
// This helps ensure the builds are consistent if source hasn't changed:
  config.plugins.push(new webpack.optimize.OccurrenceOrderPlugin());
}

module.exports = config;

And my package.json:

{
    "name": "app-mobile",
    "version": "2.0.0",
    "author": "App author",
    "homepage": "http://myapp.com/",
    "private": true,
    "scripts": {
        "clean": "ionic-app-scripts clean",
        "build": "ionic-app-scripts build",
        "lint": "ionic-app-scripts lint",
        "ionic:build": "ionic-app-scripts build",
        "ionic:serve": "ionic-app-scripts serve"
    },
    "config": {
        "ionic_webpack": "./config/webpack.config.js",
        "ionic_build_to_es5": false
    },
    "dependencies": {
        "@angular/common": "4.1.3",
        "@angular/compiler": "4.1.3",
        "@angular/compiler-cli": "4.1.3",
        "@angular/core": "4.1.3",
        "@angular/forms": "4.1.3",
        "@angular/http": "4.1.3",
        "@angular/platform-browser": "4.1.3",
        "@angular/platform-browser-dynamic": "4.1.3",
        "@ionic-native/core": "3.12.1",
        "@ionic-native/device": "^3.12.1",
        "@ionic-native/network": "^3.12.1",
        "@ionic-native/splash-screen": "3.12.1",
        "@ionic-native/status-bar": "3.12.1",
        "@ionic/storage": "2.0.1",
        "@ngx-translate/core": "^7.0.0",
        "@ngx-translate/http-loader": "^0.1.0",
        "cordova-android": "^6.2.3",
        "cordova-browser": "^4.1.0",
        "cordova-plugin-console": "^1.0.5",
        "cordova-plugin-crosswalk-webview": "^2.3.0",
        "cordova-plugin-device": "^1.1.4",
        "cordova-plugin-splashscreen": "^4.0.3",
        "cordova-plugin-statusbar": "^2.2.2",
        "cordova-plugin-whitelist": "^1.3.1",
        "cordova-sqlite-storage": "^2.0.4",
        "ionic-angular": "3.5.0",
        "ionic-plugin-keyboard": "^2.2.1",
        "ionicons": "3.0.0",
        "lodash": "^4.17.4",
        "rxjs": "5.4.0",
        "sw-toolbox": "3.6.0",
        "zone.js": "0.8.12"
    },
    "devDependencies": {
        "@ionic/app-scripts": "^2.0.0",
        "@ionic/cli-plugin-cordova": "1.4.0",
        "@ionic/cli-plugin-ionic-angular": "1.3.1",
        "dotenv": "^4.0.0",
        "lodash": "^4.17.4",
        "typescript": "2.3.4",
        "webpack-merge": "^4.1.0"
    },
    "description": "An Ionic project",
    "cordova": {
        "plugins": {
            "cordova-sqlite-storage": {},
            "cordova-plugin-console": {},
            "cordova-plugin-device": {},
            "cordova-plugin-splashscreen": {},
            "cordova-plugin-statusbar": {},
            "cordova-plugin-whitelist": {},
            "ionic-plugin-keyboard": {},
            "cordova-plugin-crosswalk-webview": {
                "XWALK_VERSION": "23+",
                "XWALK_LITEVERSION": "xwalk_core_library_canary:17+",
                "XWALK_COMMANDLINE": "--disable-pull-to-refresh-effect",
                "XWALK_MODE": "embedded",
                "XWALK_MULTIPLEAPK": "true"
            }
        },
        "platforms": [
            "android",
            "browser"
        ]
    }
}

I'm merging your config with mine, maybe it's coming from there?

[masimplo]

Here you go @danbucholtz
I have two webpack related dependencies. webpack-bundle-analyzer and wallaby-webpack. Adding webpack as an explicit devDependency fixes the issue.

   "dependencies": {
        "@angular/animations": "4.1.3",
        "@angular/common": "4.1.3",
        "@angular/compiler": "4.1.3",
        "@angular/compiler-cli": "4.1.3",
        "@angular/core": "4.1.3",
        "@angular/forms": "4.1.3",
        "@angular/http": "4.1.3",
        "@angular/platform-browser": "4.1.3",
        "@angular/platform-browser-dynamic": "4.1.3",
        "@angular/platform-server": "4.1.3",
        "@angular/router": "4.1.3",
        "@covve/covve-contacts-plugin": "2.5.0",
        "@ionic-native/badge": "3.14.0",
        "@ionic-native/call-number": "3.14.0",
        "@ionic-native/camera": "3.14.0",
        "@ionic-native/core": "3.14.0",
        "@ionic-native/deeplinks": "3.14.0",
        "@ionic-native/device": "3.14.0",
        "@ionic-native/facebook": "3.14.0",
        "@ionic-native/file": "3.14.0",
        "@ionic-native/keyboard": "3.14.0",
        "@ionic-native/local-notifications": "3.14.0",
        "@ionic-native/network": "3.14.0",
        "@ionic-native/push": "3.14.0",
        "@ionic-native/sms": "3.14.0",
        "@ionic-native/splash-screen": "3.14.0",
        "@ionic-native/status-bar": "3.14.0",
        "@ionic-native/transfer": "3.14.0",
        "@ionic/storage": "2.0.1",
        "async-lock": "1.0.0",
        "cc.fovea.cordova.purchase": "6.1.2",
        "cordova-android": "6.2.3",
        "cordova-plugin-app-event": "1.2.0",
        "cordova-plugin-appsflyer-sdk": "4.2.23",
        "cordova-plugin-badge": "0.8.1",
        "cordova-plugin-call-number": "1.0.1",
        "cordova-plugin-camera": "2.4.1",
        "cordova-plugin-compat": "1.1.0",
        "cordova-plugin-device": "1.1.6",
        "cordova-plugin-facebook4": "1.7.4",
        "cordova-plugin-file": "4.3.3",
        "cordova-plugin-file-transfer": "1.6.3",
        "cordova-plugin-google-conversion-tracker": "1.0.1",
        "cordova-plugin-network-information": "1.3.3",
        "cordova-plugin-splashscreen": "4.0.3",
        "cordova-plugin-statusbar": "2.2.3",
        "cordova-plugin-whitelist": "1.3.2",
        "cordova-sms-plugin": "0.1.11",
        "de.appplant.cordova.plugin.local-notification": "0.8.5",
        "immutable": "3.8.1",
        "ionic-angular": "3.5.0",
        "ionic-plugin-deeplinks": "1.0.15",
        "ionic-plugin-keyboard": "2.2.1",
        "ionicons": "3.0.0",
        "jsnlog": "2.24.0",
        "lodash.isempty": "4.4.0",
        "lodash.isequal": "4.5.0",
        "lodash.isstring": "4.0.1",
        "moment": "2.18.1",
        "phonegap-plugin-push": "1.10.5",
        "pouchdb": "6.2.0",
        "rxjs": "5.4.0",
        "sw-toolbox": "3.6.0",
        "uuid": "3.1.0",
        "zone.js": "0.8.12"
    },
    "devDependencies": {
        "@angular/cli": "1.0.1",
        "@ionic/app-scripts": "2.0.0",
        "@ionic/cli-plugin-cordova": "1.4.0",
        "@ionic/cli-plugin-ionic-angular": "1.3.1",
        "@types/async-lock": "0.0.19",
        "@types/chance": "0.7.33",
        "@types/jasmine": "2.5.53",
        "@types/lodash": "4.14.66",
        "@types/pouchdb": "6.1.0",
        "@types/uuid": "3.0.0",
        "angular2-template-loader": "0.6.2",
        "chance": "1.0.10",
        "codecov": "2.2.0",
        "codelyzer": "2.1.1",
        "codename": "0.0.4",
        "del": "3.0.0",
        "electron": "1.6.11",
        "husky": "0.14.3",
        "jasmine-core": "2.6.4",
        "jasmine-spec-reporter": "4.1.1",
        "karma": "1.7.0",
        "karma-chrome-launcher": "2.2.0",
        "karma-cli": "1.0.1",
        "karma-coverage-istanbul-reporter": "1.3.0",
        "karma-jasmine": "1.1.0",
        "karma-jasmine-html-reporter": "0.2.2",
        "karma-junit-reporter": "1.2.0",
        "karma-nicer-reporter": "1.1.0",
        "karma-teamcity-reporter": "1.0.0",
        "tslint": "4.5.1",
        "tslint-eslint-rules": "3.5.1",
        "typescript": "2.3.4",
        "wallaby-webpack": "0.0.38",
        "webpack-bundle-analyzer": "2.8.2"
    },
    "config": {
        "ionic_webpack": "./webpack.config.js"
    }

[danbucholtz]

The merging of the config should not be an issue but something else in your project is pulling in a webpack config that is breaking stuff. I am not sure of the best path forward here. Is it throwing on the require statement or when running this line var ModuleConcatPlugin = require('webpack/lib/optimize/ModuleConcatenationPlugin'); does ModuleConcatPlugin come back null?

We could easily add a null check.

Thanks,
Dan

[danbucholtz]

I am thinking maybe adding the explicit dev dependency is the way forward for now until those tools update to use the latest version. Is that cool? I am not sure what else we can do since it isn't an app-scripts issue, it is just a colliding webpack version issue.

Thanks,
Dan

[HugoHeneault]

Here's the error message I have:

There was an error in config file "/Users/hugo/dev/app/mobile/config/webpack.config.js". Using defaults instead.
{ Error: Cannot find module 'webpack/lib/optimize/ModuleConcatenationPlugin'
    at Function.Module._resolveFilename (module.js:485:15)
    at Function.Module._load (module.js:437:25)
    at Module.require (module.js:513:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Users/hugo/dev/app/mobile/node_modules/@ionic/app-scripts/config/webpack.config.js:5:26)
    at Module._compile (module.js:569:30)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3) code: 'MODULE_NOT_FOUND' }

Do you want me to try something else?

[ztecharoberts]

$ npm ls webpack
├─┬ @angular/[email protected]
│ └── [email protected] 
└─┬ @ionic/[email protected]
  └── [email protected] 

looks like angular has an older dependency. Not sure if this is what you are looking for Dan.

[masimplo]

I guess Ionic is ahead of the pack since everyone else is using the older version ;)
Explicit webpack dependency doesn't sound bad at all. Maybe include a note in Changelog or Readme?

[peterpeterparker]

I faced the same error and was able to solve it the following way:

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

enjoy!

P.S.: not the first time I had to do these cmds since the introduction of package-lock.json. For references of the previous problem: https://github.com/ionic-team/ionic-app-scripts/issues/1066

[danbucholtz]

@peterpeterparker,

I am going to remove the lock file. It seems to be causing more harm than good at this point TBH. It came along for the ride with NPM 5 but it seems buggy.

Thanks,
Dan

[peterpeterparker]

@danbucholtz for the record, if that's relevant, I had to run the above cmd while upgrading from 1.3.12 to 2.0.0 only.

upgrading from 2.0.0 to 2.0.1 didn't needed them aka just updating was enough.

p.s.: thx a lot for the fixes in 2.0.1, specially the http-server one!

[danbucholtz]

I've added a note about the webpack thing. I don't think there is anything else we can do at this time.

Thanks,
Dan