Custom webpack config not working after upgrading to 1.2.x

[biesbjerg]

Short description of the problem:

After updating app-scripts from 1.1.4 to 1.2.x I can no longer build my app with --prod parameter.

I get an error message:

bash-3.2$ ionic cordova:build ios --prod --release
  Running app-scripts build: --prod --iscordovaserve --nobrowser
[13:16:55]  build prod started ...
[13:16:55]  clean started ...
[13:16:55]  clean finished in 1 ms
[13:16:55]  copy started ...
[13:16:55]  ngc started ...
[13:17:16]  ngc finished in 20.87 s
[13:17:16]  preprocess started ...
[13:17:16]  deeplinks started ...
[13:17:17]  deeplinks finished in 1.03 s
[13:17:17]  optimization started ...
[13:17:17]  optimization finished in 9 ms
[13:17:17]  preprocess finished in 1.05 s
[13:17:17]  webpack started ...
[13:17:18]  copy finished in 22.33 s
[13:17:50]  webpack finished in 32.90 s
[13:17:50]  sass started ...
[13:17:50]  transpile bundle started ...
^@[13:18:11]  transpile bundle finished in 21.03 s
[13:18:11]  uglifyjs started ...
[13:18:12]  sass finished in 21.91 s
[13:18:12]  cleancss started ...
[13:18:14]  cleancss finished in 1.90 s
{ Error: [object Object]
    at BuildError.Error (native)
    at new BuildError (/Users/kim/ionic/mindly-app/master/node_modules/@ionic/app-scripts/dist/util/errors.js:16:28)
    at ChildProcess.<anonymous> (/Users/kim/ionic/mindly-app/master/node_modules/@ionic/app-scripts/dist/worker-client.js:38:24)
    at emitTwo (events.js:106:13)
    at ChildProcess.emit (events.js:191:7)
    at process.nextTick (internal/child_process.js:744:12)
    at _combinedTickCallback (internal/process/next_tick.js:67:7)
    at process._tickCallback (internal/process/next_tick.js:98:9) hasBeenLogged: false, isFatal: false, name: 'Error' }

What behavior are you expecting?

A succesfull build

**In my package.json I have **

...
  "config": {
    "ionic_bundler": "webpack",
    "ionic_copy": "./config/copy.config.js",
    "ionic_webpack": "./config/webpack.config.js"
  },
...

**And my custom `webpack.config.js`:**
```js
let webpackConfig = require('@ionic/app-scripts/config/webpack.config');
var path = require('path');

module.exports = Object.assign({}, webpackConfig, {
	resolve: Object.assign({}, webpackConfig.resolve, {
		alias: {
			"@app/config": path.resolve('./src/config/config.' + process.env.IONIC_ENV + '.ts')
		}
	})
});

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

Ionic info:

  Your system information:

    Cordova CLI: 6.5.0
    Ionic Framework Version: 2.3.0
    Ionic CLI Version: 3.0.0-beta.4
    ios-deploy version: 1.9.1
    ios-sim version: 5.0.13
    OS: macOS Sierra
    Node Version: v6.9.1
    Xcode version: Xcode 8.2.1 Build version 8C1002

Reverting to 1.1.4 (or removing ionic_webpack from package.json) makes my app build again.

I'm not sure what other information I can provide to help you reproduce?

[biesbjerg]

console.loging the modified webpack config in webpack.config.js looks like this:

[13:27:28]  webpack started ...
{ entry: '/Users/kim/ionic/mindly-app/master/src/app/main.ts',
  output:
   { path: '{{BUILD}}',
     publicPath: 'build/',
     filename: 'main.js',
     devtoolModuleFilenameTemplate: [Function: provideCorrectSourcePath] },
  devtool: 'source-map',
  resolve:
   { extensions: [ '.ts', '.js', '.json' ],
     modules: [ '/Users/kim/ionic/mindly-app/master/node_modules' ],
     alias: { '@app/config': '/Users/kim/ionic/mindly-app/master/src/config/config.prod.ts' } },
  module: { loaders: [ [Object], [Object] ] },
  plugins: [ IonicEnvironmentPlugin { context: [Object] } ],
  node: { fs: 'empty', net: 'empty', tls: 'empty' } }
[13:27:28]  copy finished in 17.28 s
[13:27:53]  webpack finished in 25.66 s

Which looks okay to me.

[biesbjerg]

Don't know if it's useful, but npm run ionic:build --aot builds okay (a dev build, of course, but with aot)

[kleeb]

The same error occurs when building with rollup bundler.
First occured in 1.2.3 version.

...
[12:09:04]  rollup finished in 32.66 s 
[12:09:04]  sass started ... 
[12:09:04]  transpile bundle started ... 
[12:09:42]  transpile bundle finished in 37.93 s 
[12:09:42]  uglifyjs started ... 
[12:09:44]  sass finished in 40.03 s 
[12:09:44]  cleancss started ... 
[12:09:46]  cleancss finished in 1.42 s 
WARN: Output exceeds 32000 characters
[12:10:26]  ionic-app-script task: "build" 
[12:10:26]  Error: [object Object] 
Error: [object Object]
    at new BuildError (/Users/kleeb/workspace/ionic/node_modules/@ionic/app-scripts/dist/util/errors.js:16:28)
    at ChildProcess.<anonymous> (/Users/kleeb/workspace/ionic/node_modules/@ionic/app-scripts/dist/worker-client.js:38:24)
    at emitTwo (events.js:106:13)
    at ChildProcess.emit (events.js:191:7)
    at process.nextTick (internal/child_process.js:744:12)
    at _combinedTickCallback (internal/process/next_tick.js:67:7)
    at process._tickCallback (internal/process/next_tick.js:98:9)

[mordka]

It looks like it's related to #549 and #701
When I nailed it down to run sass, the error message is more informative

TypeError: Cannot read property 'fileCache' of undefined
    at Object.getInstance (/home/mordka/project/node_modules/@ionic/app-scripts/dist/util/hybrid-file-system-factory.js:8:84)

Which is pointing that IonicEnvironmentPlugin is injected with null context. Similar problems were resolved in 0.0.48. Maybe we have regression bug, @danbucholtz ?

Im running webpack with IonicEnvironmentPlugin and ionic info:

Cordova CLI: 6.5.0 
Ionic Framework Version: 2.3.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.2.5
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Linux 4.4
Node Version: v6.10.1
Xcode version: Not installed

[danbucholtz]

@biesbjerg,

Do you have a repo I can use to quickly recreate this?

Thanks,
Dan

[biesbjerg]

@danbucholtz

Sadly, no.

I checked out app-scripts@master (I saw you added some better error logging for worker clients) and then I got this:

[09:24:21]  ionic-app-script task: "build"
[09:24:21]  Error: ENOENT: no such file or directory, open
            '/Users/kim/ionic/mindly-app/master/www/build/web-animations.min.js.map' in undefined at line undefined, col
            undefined, pos undefined
Error: ENOENT: no such file or directory, open '/Users/kim/ionic/mindly-app/master/www/build/web-animations.min.js.map' in undefined at line undefined, col undefined, pos undefined
    at BuildError.Error (native)
    at new BuildError (/Users/kim/ionic/ionic-app-scripts/dist/util/errors.js:16:28)
    at taskReject (/Users/kim/ionic/ionic-app-scripts/dist/worker-process.js:36:22)
    at /Users/kim/ionic/ionic-app-scripts/dist/worker-process.js:14:13
    at process._tickCallback (internal/process/next_tick.js:103:7)

I also have a custom copy config, that copies web-animations.min.js to build folder. For some reason app-scripts requires a .map file to be present or it will fail with the error above.

I modified my custom copy config:

 module.exports = Object.assign({}, copyConfig, {
        copyWebAnimationsJs: {
-               src: ['{{ROOT}}/node_modules/web-animations-js/web-animations.min.js'],
+               src: [
+                       '{{ROOT}}/node_modules/web-animations-js/web-animations.min.js',
+                       '{{ROOT}}/node_modules/web-animations-js/web-animations.min.js.map'
+               ],
                dest: '{{BUILD}}'
        }
 });

... and now it works!

Maybe .map should not be a requirement for custom scripts copied to build?

[kleeb]

duplicate #853

[danbucholtz]

@biesbjerg,

Yeah. You're right. We've gotta think about that. It is likely trying to minify an already minified file. Let's track it at #853.

Thanks,
Dan