Ionic-app-scripts: Failing Ionic3 dev and production builds on 1.3.4

[samastur]

Short description of the problem:

With version 1.3.4 dev build builds, but starts unsuccessfully (after splashscreen we get a blank screen and error TypeError: Cannot read property 'defineDriver' of undefined when failing to inject driver in Ionic-storage). Production build fails to build with an "Unexpected token" error.

I can successfully build dev build with version 1.3.1, but not production one which builds an app that starts into a blank white screen. Blank screen starts report no error except failure to load main.js.map on iOS and on Android with Uncaught ReferenceError: exports is not defined.

Any other version of app scripts also fail.

Possibly related to #877 and #898.

What behavior are you expecting?

To be able to build a working app both with dev and production setting like I can for dev version with 1.3.1 and could with practically same code on Ionic2 and earlier version of scripts.

Steps to reproduce:

Production build fails with:

[10:17:17]  ionic-app-script task: "build"
[10:17:17]  Error: Unexpected token: name (NetworkService) in /Users/markos/work/klevio/klevio-app/www/build/main.js at
            line 28608, col 4, pos 988306
Error: Unexpected token: name (NetworkService) in /Users/markos/work/klevio/klevio-app/www/build/main.js at line 28608, col 4, pos 988306
    at BuildError.Error (native)
    at new BuildError (/Users/markos/work/klevio/klevio-app/node_modules/@ionic/app-scripts/dist/util/errors.js:16:28)
    at taskReject (/Users/markos/work/klevio/klevio-app/node_modules/@ionic/app-scripts/dist/worker-process.js:36:22)
    at /Users/markos/work/klevio/klevio-app/node_modules/@ionic/app-scripts/dist/worker-process.js:14:13
    at process._tickCallback (internal/process/next_tick.js:109:7)

It fails at the beginning of our app's code (first ~28600 lines are Angular's and Ionic's). Line 28608 of main.js is the 4th line of the following code (let NetworkService...):

Object.defineProperty(exports, "__esModule", { value: true }); const core_1 = __webpack_require__(0); const network_1 = __webpack_require__(138); let NetworkService = class NetworkService { constructor(_network) { this._network = _network; this.offline = false; this.currentPage = null; this.offline = _network.type === 'none'; this.disconnect = _network.onDisconnect(); this.connect = _network.onConnect(); // watch network for a disconnect this._disconnectSubscription = this.disconnect.subscribe(() => { this.offline = true; this.setConnection(); }); // watch network for a connection this._connectSubscription = this.connect.subscribe(() => { this.offline = false; // We just got a connection but we need to wait briefly // before we determine the connection type. Might need to wait // prior to doing any api requests as well. setTimeout(() => { this.setConnection(); }, 1000); }); } checkConnection() { this.offline = this._network.type === 'none'; } setConnection() { if (this.currentPage) { this.currentPage.offline = this.offline; this.ref.detectChanges(); } } setCurrentPage(component, ref) { this.currentPage = component; this.ref = ref; this.setConnection(); } handleOffline(page, ref) { let oldWillEnter = () => { }; if (page.ionViewWillEnter) { oldWillEnter = page.ionViewWillEnter.bind(page); } page.ionViewWillEnter = () => { this.setCurrentPage(page, ref); oldWillEnter(); }; } };

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

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

Your system information:

Cordova CLI: 6.5.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
ios-deploy version: 1.9.1
ios-sim version: 5.0.13
OS: macOS Sierra
Node Version: v6.10.1
Xcode version: Xcode 8.3.1 Build version 8E1000a

Cordova CLI: 6.5.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
ios-deploy version: 1.9.1
ios-sim version: 5.0.13
OS: macOS Sierra
Node Version: v6.10.1
Xcode version: Xcode 8.3.1 Build version 8E1000a

[danbucholtz]

What does your package.json look like? It seems strange that app-scripts would introduce a type checking error in the other library (Ionic Storage I presume).

Thanks,
Dan

[samastur]

Currently:

  "name": "klevio",
  "author": "Klevio",
  "homepage": "http://klevio.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "watch": "ionic-app-scripts watch",
    "serve:before": "watch",
    "deploy:before": "build",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve",
    "test-coverage": "ng test --code-coverage",
    "test": "ng test",
    "e2e": "ionic-app-scripts build && protractor",
    "postinstall": "webdriver-manager update"
  },
  "dependencies": {
    "@angular/common": "4.0.0",
    "@angular/compiler": "4.0.0",
    "@angular/compiler-cli": "4.0.0",
    "@angular/core": "4.0.0",
    "@angular/forms": "4.0.0",
    "@angular/http": "4.0.0",
    "@angular/platform-browser": "4.0.0",
    "@angular/platform-browser-dynamic": "4.0.0",
    "@ionic-native/core": "^3.4.4",
    "@ionic-native/http": "^3.4.4",
    "@ionic-native/native-storage": "^3.4.4",
    "@ionic-native/network": "^3.4.4",
    "@ionic-native/status-bar": "^3.4.4",
    "@ionic/storage": "2.0.1",
    "ionic-angular": "3.0.1",
    "ionicons": "3.0.0",
    "rxjs": "5.1.1",
    "sw-toolbox": "3.4.0",
    "zone.js": "^0.8.4",
    "zxcvbn": "4.4.2"
  },
  "devDependencies": {
    "@ionic/app-scripts": "1.3.1",
    "@types/jasmine": "2.5.41",
    "@types/node": "^7.0.0",
    "@angular/cli": "1.0.0",
    "codelyzer": "^2.0.0-beta.4",
    "jasmine-core": "^2.5.2",
    "jasmine-spec-reporter": "^3.2.0",
    "karma": "^1.4.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.1.0",
    "karma-mocha-reporter": "^2.2.1",
    "karma-remap-istanbul": "^0.4.0",
    "protractor": "^5.0.0",
    "ts-node": "^2.0.0",
    "tslint": "^4.3.1",
    "typescript": "~2.2.1"
  },
  "config": {
    "ionic_bundler": "webpack",
    "ionic_source_map_type": "source-map"
  },
  "description": "Klevio"
}

I use 1.3.1 for now because at least I can continue development.

[samastur]

I'll be travelling next 10 days so my ability to respond might be more sporadic, but this is an issue that is very much preventing us from releasing next version of our app unless we downgrade back to Ionic2.

[rwvandenberg]

Also experiencing this with version 1.3.4

{
  "name": "redacted",
  "author": "redacted",
  "homepage": "redacted",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve",
    "test": "node_modules\\.bin\\karma start ./test-config/karma.conf.js"
  },
  "dependencies": {
    "@angular/animations": "4.0.2",
    "@angular/common": "4.0.2",
    "@angular/compiler": "4.0.2",
    "@angular/compiler-cli": "4.0.2",
    "@angular/core": "4.0.2",
    "@angular/forms": "4.0.2",
    "@angular/http": "4.0.2",
    "@angular/platform-browser": "4.0.2",
    "@angular/platform-browser-dynamic": "4.0.2",
    "@angular/platform-server": "4.0.2",
    "@angular/router": "4.0.2",
    "@ionic/storage": "2.0.0",
    "@types/jasmine": "2.5.38",
    "@types/node": "7.0.13",
    "angular2-template-loader": "0.6.2",
    "ionic-angular": "3.0.1",
    "ionic-native": "2.9.0",
    "ionicons": "3.0.0",
    "jasmine": "2.5.3",
    "moment": "2.16.0",
    "moment-timezone": "0.5.9",
    "pouchdb": "6.0.7",
    "rxjs": "5.3.0",
    "sw-toolbox": "3.6.0",
    "typescript": "2.3.0",
    "zone.js": "0.8.5"
  },
  "devDependencies": {
    "@angular/tsc-wrapped": "4.0.2",
    "@ionic/app-scripts": "1.3.4",
    "@ionic/cli-build-ionic-angular": "0.0.2",
    "angular2-template-loader": "0.6.2",
    "html-loader": "0.4.5",
    "karma": "1.6.0",
    "karma-chrome-launcher": "2.0.0",
    "karma-cli": "1.0.1",
    "karma-jasmine": "1.1.0",
    "karma-jasmine-html-reporter": "0.2.2",
    "karma-sourcemap-loader": "0.3.7",
    "karma-webpack": "2.0.3",
    "null-loader": "0.1.1",
    "ts-loader": "2.0.3"
  },
  "cordovaPlugins": [
    "cordova-plugin-device",
    "cordova-plugin-console",
    "cordova-plugin-statusbar",
    "cordova-plugin-whitelist",
    "cordova-plugin-splashscreen",
    "cordova-plugin-statusbar",
    "ionic-plugin-keyboard"
  ],
  "cordovaPlatforms": [
    "ios",
    {
      "platform": "ios",
      "version": "",
      "locator": "ios"
    }
  ],
  "version": "2.0.0",
  "description": "redacted"
}

Also:

λ ionic info
Your system information:
Cordova CLI: 6.5.0
Ionic Framework Version: 3.0.1
Ionic CLI Version: 2.2.2
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 1.3.4
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 7
Node Version: v4.5.0
Xcode version: Not installed

[mburger81]

As #877 I think this bug should be handled relative urgent if possible

[danbucholtz]

Try 1.3.4 or nightly. 1.3.4 has some known performance issues right now. nightly does not.

Thanks,
Dan

[mburger81]

Upgrading to @nightly I get several errors:

First on launching this: ionic serve

Error: app-scripts serve unexpectedly failed.
    at Object.<anonymous> (/web-client-ionic/node_modules/@ionic/cli-plugin-ionic-angular/dist/serve.js:47:19)
    at next (native)
    at fulfilled (/web-client-ionic/node_modules/@ionic/cli-plugin-ionic-angular/dist/serve.js:4:58)
michi@zotacei730:~/web-client-ionic$ [10:56:33]  tslint: src/app/app.component.ts, line: 2
...
and at the end
....
UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: channel closed

Second on launching build production: npm run build --prod I got many many errors like that:

Error: ./src/pages/dashboard/dashboard.module.ngfactory.ts Module parse failed: 
            /web-client-ionic/node_modules/@ionic/app-scripts/dist/webpack/optimization-loader.js!/web-client-ionic/src/pages/dashboard/dashboard.module.ngfactory.ts
            Unexpected token (94:67) You may need an appropriate loader to handle this file type. | import * as import83 
            from './dashboard'; | import * as import84 from 'ionic-angular/util/module-loader'; | class 
            DashboardPageModuleInjector extends import0.ɵNgModuleInjector<import1.DashboardPageModule> { | 
            _CommonModule_0:import2.CommonModule; | _ɵba_1:import3.ɵba; @ ./src async @ 

I also tried to update ionic-angular@nightly but there are still the same problems
:cry:

[mburger81]

After reverting from nightly to version 1.3.4 there was still the same issue! :question:
I deleted the entire node_modules directory and reinstall all them, but there was STILL THE SAME ISSUE

WTF :question:

I reopend a new terminal session, BUG was still there, then last tentative reboot the machine, and after rebooting the machine there was finally 1.3.4 working again! WTF? :sweat_smile:

[danbucholtz]

How can I reproduce this issue?

Thanks,
Dan

[samastur]

I don't (yet) know how to make a reproducible test case. If I did, I would probably be much closer to understanding the problem.

I originally tested this on 1.3.4. Did it again with the same result. Also tested 1.3.6. In both cases with and without ionic_* config settings in package.json. In each test case I nuke node_modules and start from a clean reinstall of packages.

897 hack at least gets my app successfully through production build after which it fails with the same error as dev build (which is really localForage in ionic-storage complaining).

I am still on the road with limited means to test things (and will be for most of next week), but will try to create a reproducible test case once I am back before we consider going back to Ionic2.

[danbucholtz]

Well the issue appears to be you have es2015 code that is trying to be minified using uglify, which doesn't support es2015. I'm not sure why that would be. Can you give me access to a repo to reproduce it?

Thanks,
Dan

[mburger81]

@samastur where is your file located? Comes it from npm package or is it a .js file in your src folder?

[samastur]

@danbucholtz Thanks, your comment pointed me in right direction and I got our build working again (tested with 1.3.6).

Turns out tsconfig.json had wrong values. I compared ours with new one that gets generated by Ionic and these were the differences:

-    "module": "commonjs",
+    "module": "es2015",
     "sourceMap": true,
-    "target": "es2015",
+    "target": "es5",
   },
   "exclude": [
+    "node_modules",
     "src/**/*.spec.ts"

I don't know (yet) which of these are actually necessary as I'm short on time, but together they make everything work for us.

As far as es2015 code is concerned, all our code is typescript and every 3rd party code we use is either installed through npm (basically just zxcvbn) or directly referenced in index.html (really just Intercom.io).

[26983337]

test in Ionic3+Angular4

"ionic/storage": "^2.0.0",
IonicStorageModule.forRoot()

"Uncaught (in promise): TypeError: Cannot call method 'defineDriver' of undefined
TypeError: Cannot call method 'defineDriver' of undefined
at new t
at new e
at Object.r [as provideStorage]
at t.Object.defineProperty.get [as _Storage_127]
at t.getInternal
at t.e.get
at pn
at cn
at rn

[26983337]

tsconfig.json "module": "es2015",

[johanlantz]

This worked for me as well in iOS using ionic 3.4.0
tsconfig.json "module": "es2015",

Previously it was commonjs and when using --prod it failed with the localforage driver error as well.