Ionic-app-scripts: bug: --prod build hangs at webpack started

Created on 27 Oct 2017 · 27Comments · Source: ionic-team/ionic-app-scripts

_From @yogeshkrishnani on October 27, 2017 14:13_

Type: bug

Ionic Version: 2.x

Platform: all

When I build my proejct with --prod flag, It hangs at webpack started. Does not respond even after half an hour.

Running app-scripts build: --prod --platform android --target cordova
[19:16:14] build prod started ...
[19:16:14] clean started ...
[19:16:14] clean finished in 7 ms
[19:16:14] copy started ...
[19:16:15] copy finished in 1.40 s
[19:16:15] deeplinks started ...
[19:16:16] deeplinks finished in 521 ms
[19:16:16] ngc started ...
[19:17:06] ngc finished in 49.91 s
[19:17:06] preprocess started ...
[19:17:06] preprocess finished in 1 ms
[19:17:06] webpack started ...

If I omit --prod flag, It works fine.

My environment info -->

cli packages:

@ionic/cli-utils  : 1.15.2
ionic (Ionic CLI) : 3.15.2

global packages:

cordova (Cordova CLI) : 7.1.0

local packages:

@ionic/app-scripts : 3.0.1
Cordova Platforms  : android 6.1.2 ios 4.2.1
Ionic Framework    : ionic-angular 3.7.1

System:

Android SDK Tools : 25.2.3
Node              : v8.8.1
npm               : 5.5.1 
OS                : Linux 4.10</span>

_Copied from original issue: ionic-team/ionic#13264_

Source

kensodemann

All 27 comments

Hello! Thank you for opening an issue with us!

This does not appear to be an Ionic Framework issue. It might be an issue with the Ionic CLI. I will move the issue over there for you. Please follow the newly created issue for updates.

Thank you for using Ionic

kensodemann on 27 Oct 2017

webpack process completed after 2261 seconds. Almost 37 minutes.

yogeshkrishnani on 28 Oct 2017

@yogeshkrishnani Can you post your package.json dependencies and also the file size of the bundle it finishes building?

imhoffd on 30 Oct 2017

@yogeshkrishnani,

Can we have access to your project to troubleshoot?

Thanks,
Dan

danbucholtz on 30 Oct 2017

@dwieeb Below is my package.json:

{
  "name": "ionic-hello-world",
  "version": "0.0.0",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.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"
  },
  "dependencies": {
    "@angular/common": "4.4.3",
    "@angular/compiler": "4.4.3",
    "@angular/compiler-cli": "4.4.3",
    "@angular/core": "4.4.3",
    "@angular/forms": "4.4.3",
    "@angular/http": "4.4.3",
    "@angular/platform-browser": "4.4.3",
    "@angular/platform-browser-dynamic": "4.4.3",
    "@ionic-native/android-permissions": "^4.3.0",
    "@ionic-native/app-version": "^4.2.1",
    "@ionic-native/camera": "^4.1.0",
    "@ionic-native/core": "4.3.2",
    "@ionic-native/file-chooser": "^4.1.0",
    "@ionic-native/keyboard": "^3.14.0",
    "@ionic-native/splash-screen": "4.3.2",
    "@ionic-native/status-bar": "4.3.2",
    "@ionic-native/transfer": "^3.14.0",
    "@ionic/storage": "2.0.1",
    "cordova-android": "6.1.2",
    "cordova-ios": "4.2.1",
    "cordova-plugin-android-permissions": "^1.0.0",
    "cordova-plugin-app-version": "^0.1.9",
    "cordova-plugin-camera": "^2.4.1",
    "cordova-plugin-compat": "^1.2.0",
    "cordova-plugin-console": "^1.1.0",
    "cordova-plugin-device": "^1.1.6",
    "cordova-plugin-dialogs": "^1.3.3",
    "cordova-plugin-file": "^4.3.3",
    "cordova-plugin-file-transfer": "^1.6.3",
    "cordova-plugin-filechooser": "^1.0.1",
    "cordova-plugin-filepath": "^1.1.0",
    "cordova-plugin-globalization": "^1.0.7",
    "cordova-plugin-mfp": "^8.0.2017102115",
    "cordova-plugin-okhttp": "^2.0.0",
    "cordova-plugin-splashscreen": "^4.0.3",
    "cordova-plugin-statusbar": "^2.2.3",
    "cordova-plugin-whitelist": "^1.3.2",
    "ionic-angular": "3.7.1",
    "ionic-plugin-keyboard": "^2.2.1",
    "ionicons": "3.0.0",
    "rxjs": "5.4.3",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.18"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.0.1",
    "typescript": "2.3.4"
  },
  "cordovaPlugins": [
    "cordova-plugin-console",
    "cordova-plugin-whitelist",
    "cordova-plugin-statusbar",
    "cordova-plugin-splashscreen",
    "cordova-plugin-device",
    "ionic-plugin-keyboard"
  ],
  "cordovaPlatforms": [],
  "description": "HelloWorld: An Ionic project",
  "cordova": {
    "platforms": [
      "ios",
      "android"
    ],
    "plugins": {
      "cordova-plugin-whitelist": {},
      "cordova-plugin-console": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "ionic-plugin-keyboard": {},
      "cordova-plugin-mfp": {},
      "cordova-plugin-camera": {
        "CAMERA_USAGE_DESCRIPTION": " ",
        "PHOTOLIBRARY_USAGE_DESCRIPTION": " "
      },
      "cordova-plugin-file": {},
      "cordova-plugin-file-transfer": {},
      "cordova-plugin-filechooser": {},
      "cordova-plugin-filepath": {},
      "cordova-plugin-app-version": {},
      "cordova-plugin-android-permissions": {}
    }
  }
}

yogeshkrishnani on 31 Oct 2017

@danbucholtz Sorry but I can't give access to my project code as it is privately owned. Let me know if you need any specific information about my project that may help.

yogeshkrishnani on 31 Oct 2017

Hope you can schedule a Teamviewer session with danbucholtz no? @yogeshkrishnani

Sampath-Lokuge on 31 Oct 2017

i have also this issue, i've never let it finish, cut the process after 10 minutes, Windows 10 fall-creators update, with [email protected]

lithiumbj on 31 Oct 2017

@yogeshkrishnani @lithiumbj About how many pages/components/etc would you say your project has?

@yogeshkrishnani @lithiumbj Did this recently just start happening, or has the build time been steadily increasing as your project has been built out?

imhoffd on 31 Oct 2017

@dwieeb : My project has around 60 pages. No actually when I upgraded ionic-cli to 3.15.2 and app-scripts to 3.0.1, the build time got exponentially increased.

yogeshkrishnani on 1 Nov 2017

@Sampath-Lokuge : Yes, I don't mind having a TeamViewer session with @danbucholtz.

yogeshkrishnani on 1 Nov 2017

I got the same upgrading to 3.15.2. 45 pages, 84 components, 108 services, 10 pipes.
On mac it hangs there forever and maybe finishes after 10mins or so. In linux circle CI I get an out of memory error. Both use node v7.10

[22:15:17] webpack started ...
[22:15:18] copy finished in 49.66 s

<--- Last few GCs --->

[22481:0x3572b30] 271922 ms: Mark-sweep 1418.9 (1968.8) -> 1418.9 (1968.8) MB, 461.6 / 0.0 ms allocation failure scavenge might not succeed
[22481:0x3572b30] 272437 ms: Mark-sweep 1418.9 (1968.8) -> 1418.7 (1924.8) MB, 514.1 / 0.0 ms last resort
[22481:0x3572b30] 272936 ms: Mark-sweep 1418.7 (1924.8) -> 1418.7 (1900.3) MB, 498.6 / 0.0 ms last resort

<--- JS stacktrace --->

==== JS stack trace =========================================

Security context: 0x6ade00266a1
1: DoJoin(aka DoJoin) [native array.js:~97] [pc=0x227b391a6234](this=0x2642cc482311 ,q=0x3d6dfccfb299 ,B=0x2642cc4d7ff9 )
2: Join(aka Join) [native array.js:~122] [pc=0x227b3afbbae2](this=0x2642cc482311 ,q=0x3d6dfccfb299
FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
1: node::Abort() [ionic]
2: 0x12b82ac [ionic]
3: v8::Utils::ReportOOMFailure(char const, bool) [ionic]
4: v8::internal::V8::FatalProcessOutOfMemory(char const, bool) [ionic]
5: v8::internal::Factory::NewRawTwoByteString(int, v8::internal::PretenureFlag) [ionic]
6: v8::internal::Runtime_StringBuilderJoin(int, v8::internal::Object*, v8::internal::Isolate) [ionic]
7: 0x227b387043a7

masimplo on 2 Nov 2017

@masimplo Try the latest Node 8 LTS. I know it offers speed/memory improvements.

imhoffd on 4 Nov 2017

Tried it (8.9.0) doesn't seem to make any real difference. 😞

masimplo on 4 Nov 2017

after struggling for two days, we found --max_old_space_size is the key,
here is our solution:
in ionic.cmd

@IF EXIST "%~dp0\node.exe" (
  "%~dp0\node.exe"  "%~dp0\node_modules\ionic\bin\ionic" %*
) ELSE (
  @SETLOCAL
  @SET PATHEXT=%PATHEXT:;.JS;=;%
  node --max_old_space_size=4096 "%~dp0\node_modules\ionic\bin\ionic" %*
)

fightant1w1ll on 7 Nov 2017

@fightant1w1ll

Thanks. I am facing the same issue. I am new to Ionic. Where do I find file "ionic.cmd" to include the solution you suggested ?

kesavaramd on 17 Nov 2017

@kesavaramd you can add this parameter under the build scripts in your package.json. Example:

"scripts": {
"build": "node --max-old-space-size=8192 --stack-size=1968 node_modules/@ionic/app-scripts/bin/ionic-app-scripts.js build",
"ionic:build": "node --max-old-space-size=8192 --stack-size=1968 node_modules/@ionic/app-scripts/bin/ionic-app-scripts.js build"
},

It goes without saying that you obviously shouldn't increase the space above your available RAM.
This solution made it possible for me to do builds at all since upgrading to app scripts 3.1.0. However my build time has increased from 26 minutes to about 5 hours :(

Sprauch on 24 Nov 2017

😕1

There seems to be some issue when I try to post the path to the ionic-app-scripts here in the comments. The intended path is, with special characters replaced by description:
node_modules/[shift+2]ionic/app-scripts/bin/ionic-app-scripts.js build

Sprauch on 24 Nov 2017

Till now there is no proper solution for this? The time taken to build app is increasing day by day :(
I am expecting for a proper fix from ionic team. :)

marutifh on 7 Mar 2018

I was able to resolve the issue by downgrading the app-scripts version to 2.1.4 from 3.0.1.

I also had to add dev dependency tsc-wrapped to resolve some ts lint issues.

"devDependencies": {
    "@angular/tsc-wrapped": "^4.4.6",
    "@ionic/app-scripts": "2.1.4",
    "typescript": "2.3.4"
  },

After changing my configuration to above, the webpack process duration came down to 3-4 minutes from 35 minutes.

yogeshkrishnani on 9 Mar 2018

Tried every suggestion here still couldn't make it a success build. It always hang like the old playstation.
screen shot 2018-05-11 at 10 59 56 pm

ionic info:

cli packages: (/usr/local/lib/node_modules)

@ionic/cli-utils  : 1.19.2
ionic (Ionic CLI) : 3.20.0

global packages:

cordova (Cordova CLI) : 8.0.0

local packages:

@ionic/app-scripts : 3.1.9
Cordova Platforms  : android 7.0.0
Ionic Framework    : ionic-angular 3.9.2

System:

Node  : v8.11.1
npm   : 5.6.0 
OS    : macOS High Sierra
Xcode : Xcode 9.3 Build version 9E145

Environment Variables:

ANDROID_HOME : not set

Misc:

backend : pro

jurerick on 11 May 2018

👍1

I'm getting the same problem as @jurerick when running ionic cordova build ios --prod. One minute I can successfully build the iOS app, then a minor logic change in the code and suddenly it just hangs forever.

Running with node --max_old_space_size=4096 seemed to have no effect other than using up 4GiB of memory and causing my whole machine to slow down.

Running without --prod does seem to work however.

Packages:

Ionic CLI: 3.2.0
Cordova: 8.0.0
Cordova platforms: iOS 4.5.4
@ionic/app-scripts: 3.1.9
ionic-angular: 3.9.2

System:

Node: v8.11.1
NPM: 5.6.9
OS: macOS 10.13.4 (High Sierra)
Xcode: Version 9.4 (9F1027a)

DanielGibbsNZ on 5 Jun 2018

This looks like it may be the same issue as #2565.

DanielGibbsNZ on 7 Jun 2018

Hello,

Please remove www folder,node modules,platforms, and npm install

please note : I have updated to ionic 4 and cordova 8.

this solved my issue.

saryuvc on 31 Aug 2018

Hello guys! I have the same error, I have already done all the procedures that I found in forums and related issues. I already used the --max_old_space_size = 4096 and 8000, but it did not work. I am currently using the command ionic cordova build ios --aot --minifyjs --minifycss to build the application, however, without the --optimizejs I am trying performance problems and other strange behavior in some device versions. I tried some solutions like downgrade the node to version 8, I'm currently in version 10, I tried to upgrade to version 11, but none of that worked. I tried to downgrade and upgrade the firebase, but the same problem happens. I believe the problem is in the firebase, because removing the codes and imports related to it occurs the same problem. At first I was using: import * the firebase from 'firebase', I thought that was the problem, and I attached a code to the firebaseConfig file:

import firebase from 'firebase / app';
import 'firebase / auth';
import 'firebase / database';
const app = firebase.initializeApp (firebaseConfig.fire)
export default app;

I decided to omit the * to see if importing the modules individually would have solved the problem, but the problem persists. I have 4 applications that have this same problem, including the one I'm working on now has only 10 pages and 4 providers. I have tried to remove the node_module folders and run npm cache clean, I tried removing also platforms, plugins, www, sourcemaps ... But none of this worked, the damn error persists. I took the chance to use angularfire2 in my code, until I have it installed on the node_modules, but I do not see any sense in using anguarfire2 instead of simply firebase, I do not think the error is there. Please help me who can.

I have the following settings:
Ionic cli: 4.5.0
Cordova 8.1.2

"dependencies": {
    "@ angular / common": "5.2.11",
    "@ angular / compiler": "5.2.11",
    "@ angular / compiler-cli": "5.2.11",
    "@ angular / core": "5.2.11",
    "@ angular / forms": "5.2.11",
    "@ angular / http": "5.2.11",
    "@ angular / platform-browser": "5.2.11",
    "@ angular / platform-browser-dynamic": "5.2.11",
    "@ ionic-native / core": "~ 4.11.0",
    "@ ionic-native / date-picker": "^ 4.12.2",
    "@ ionic-native / facebook": "^ 4.17.0",
    "@ ionic-native / firebase": "^ 4.16.0",
    "@ ionic-native / google-plus": "^ 4.17.0",
    "@ ionic-native / local-notifications": "^ 4.12.2",
    "@ ionic-native / network": "^ 4.12.2",
    "@ ionic-native / splash-screen": "~ 4.11.0",
    "@ ionic-native / sqlite": "^ 4.12.2",
    "@ ionic-native / status-bar": "~ 4.11.0",
    "@ ionic / storage": "^ 2.2.0",
    "angularfire2": "^ 5.1.0",
    "cordova": "^ 8.1.2",
    "cordova-android": "7.0.0",
    "cordova-browser": "5.0.4",
    "cordova-ios": "4.5.5",
    "cordova-plugin-badge": "^ 0.8.8",
    "cordova-plugin-datepicker": "^ 0.9.3",
    "cordova-plugin-device": "^ 2.0.2",
    "cordova-plugin-facebook4": "^ 3.2.0",
    "cordova-plugin-firebase": "^ 2.0.5",
    "cordova-plugin-googleplus": "^ 5.3.2",
    "cordova-plugin-ionic-keyboard": "^ 2.1.3",
    "cordova-plugin-ionic-webview": "^ 2.2.5",
    "cordova-plugin-local-notification": "^ 0.9.0-beta.2",
    "cordova-plugin-network-information": "^ 2.0.1",
    "cordova-plugin-splashscreen": "^ 5.0.2",
    "cordova-plugin-whitelist": "^ 1.3.3",
    "cordova-sqlite-storage": "^ 2.5.2",
    "css-animator": "^ 2.3.1",
    "firebase": "^ 5.5.5",
    "ionic-angular": "3.9.2",
    "ionicons": "3.0.0",
    "rxjs": "5.5.11",
    "sw-toolbox": "3.6.0",
    "web-animations-js": "^ 2.3.1",
    "zone.js": "0.8.26"
  },
  "devDependencies": {
    "@ ionic / app-scripts": "3.1.11",
    "typescript": "~ 2.6.2"
  }

Error:

> ionic-app-scripts build --prod --target cordova --platform ios
[07:25:45]  ionic-app-scripts 3.1.11 
[07:25:45]  build prod started ... 
[07:25:46]  clean started ... 
[07:25:46]  clean finished in 23 ms 
[07:25:46]  copy started ... 
[07:25:46]  deeplinks started ... 
[07:25:46]  deeplinks finished in 89 ms 
[07:25:46]  ngc started ... 
[07:26:02]  ngc finished in 16.44 s 
[07:26:02]  preprocess started ... 
[07:26:02]  preprocess finished in 1 ms 
[07:26:02]  webpack started ... 
[07:26:04]  copy finished in 18.30 s 

<--- Last few GCs --->

[1246:0x104802a00]    96348 ms: Scavenge 1386.5 (1423.4) -> 1386.0 (1423.9) MB, 5.8 / 0.0 ms  (average mu = 0.128, current mu = 0.067) allocation failure 
[1246:0x104802a00]    96357 ms: Scavenge 1386.7 (1423.9) -> 1386.2 (1424.4) MB, 5.8 / 0.0 ms  (average mu = 0.128, current mu = 0.067) allocation failure 
[1246:0x104802a00]    96370 ms: Scavenge 1386.9 (1424.4) -> 1386.4 (1425.4) MB, 8.7 / 0.0 ms  (average mu = 0.128, current mu = 0.067) allocation failure 


<--- JS stacktrace --->

==== JS stack trace =========================================

    0: ExitFrame [pc: 0xd614455be3d]
Security context: 0x0dbbad91e6e1 <JSObject>
    1: typeToTypeNodeHelper(aka typeToTypeNodeHelper) [0xdbbbc248089] [/Users/joaoneto/Projects/meu-bebe/node_modules/typescript/lib/typescript.js:~25875] [pc=0xd61454f9003](this=0x0dbb506026f1 <undefined>,type=0x0dbbd3094ad9 <TypeObject map = 0xdbbe2f13921>,context=0x0dbbd72dad99 <Object map = 0xdbbe2f17231>)
    2: symbolToParameterDeclaration(aka symbolToP...

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
 1: 0x1000382c7 node::Abort() [/usr/local/opt/node@10/bin/node]
 2: 0x100038498 node::FatalTryCatch::~FatalTryCatch() [/usr/local/opt/node@10/bin/node]
 3: 0x10016dee3 v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [/usr/local/opt/node@10/bin/node]
 4: 0x10016de84 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [/usr/local/opt/node@10/bin/node]
 5: 0x10041ee50 v8::internal::Heap::UpdateSurvivalStatistics(int) [/usr/local/opt/node@10/bin/node]
 6: 0x100420a1f v8::internal::Heap::CheckIneffectiveMarkCompact(unsigned long, double) [/usr/local/opt/node@10/bin/node]
 7: 0x10041e15b v8::internal::Heap::PerformGarbageCollection(v8::internal::GarbageCollector, v8::GCCallbackFlags) [/usr/local/opt/node@10/bin/node]
 8: 0x10041cfa8 v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/usr/local/opt/node@10/bin/node]
 9: 0x10042548b v8::internal::Heap::AllocateRawWithLigthRetry(int, v8::internal::AllocationSpace, v8::internal::AllocationAlignment) [/usr/local/opt/node@10/bin/node]
10: 0x100425798 v8::internal::Heap::AllocateRawWithRetryOrFail(int, v8::internal::AllocationSpace, v8::internal::AllocationAlignment) [/usr/local/opt/node@10/bin/node]
11: 0x100405d4b v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationSpace) [/usr/local/opt/node@10/bin/node]
12: 0x1005df01a v8::internal::Runtime_AllocateInNewSpace(int, v8::internal::Object**, v8::internal::Isolate*) [/usr/local/opt/node@10/bin/node]
13: 0xd614455be3d 
14: 0xd61454f9003 
[ERROR] Signal exit from subprocess.

JNSantiago on 3 Dec 2018

👍1

Solved! Only add "@firebase/database": "0.2.1", for your package.json, and works.

JNSantiago on 3 Dec 2018

@JNSantiago thank you soooooooo very much! after hours banging my head around your solution solved my problem which was similar to yours except that i'm building a PWA.. tks again!! cheers