NS 3.4 upgrade getting build-android-bundle error (webpack 0.9.0 upgrade issues)


#1

I had a functioning project under 3.3. After upgrading to 3.4 tns run android still works, but when I run npm run build-android-bundle I get the following error in the build log:

10 verbose lifecycle @~build-android-bundle: CWD: D:\hiding
11 silly lifecycle @~build-android-bundle: Args: [ '/d /s /c', 'npm run ns-bundle --android --build-app' ]
12 silly lifecycle @~build-android-bundle: Returned: code: 1  signal: null
13 info lifecycle @~build-android-bundle: Failed to exec build-android-bundle script
14 verbose stack Error: @ build-android-bundle: `npm run ns-bundle --android --build-app`
14 verbose stack Exit status 1
14 verbose stack     at EventEmitter.<anonymous> (C:\Users\Jeff\AppData\Roaming\npm\node_modules\npm\lib\utils\lifecycle.js:279:16)
14 verbose stack     at emitTwo (events.js:106:13)
14 verbose stack     at EventEmitter.emit (events.js:191:7)
14 verbose stack     at ChildProcess.<anonymous> (C:\Users\Jeff\AppData\Roaming\npm\node_modules\npm\lib\utils\spawn.js:40:14)
14 verbose stack     at emitTwo (events.js:106:13)
14 verbose stack     at ChildProcess.emit (events.js:191:7)
14 verbose stack     at maybeClose (internal/child_process.js:877:16)
14 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)
15 verbose pkgid @
16 verbose cwd D:\hiding
17 verbose Windows_NT 10.0.16299
18 verbose argv "D:\\nodejs-active\\node.exe" "C:\\Users\\Jeff\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "run" "build-android-bundle"
19 verbose node v6.9.1
20 verbose npm  v4.4.4
21 error code ELIFECYCLE
22 error errno 1
23 error @ build-android-bundle: `npm run ns-bundle --android --build-app`
23 error Exit status 1
24 error Failed at the @ build-android-bundle script 'npm run ns-bundle --android --build-app'.
24 error Make sure you have the latest version of node.js and npm installed.
24 error If you do, this is most likely a problem with the  package,
24 error not with npm itself.
24 error Tell the author that this fails on your system:
24 error     npm run ns-bundle --android --build-app
24 error You can get information on how to open an issue for this project with:
24 error     npm bugs
24 error Or if that isn't available, you can get their info via:
24 error     npm owner ls
24 error There is likely additional logging output above.
25 verbose exit [ 1, true ]

Here is my package.json

{
  "description": "NativeScript Application",
  "license": "SEE LICENSE IN <your-license-filename>",
  "readme": "NativeScript Application",
  "repository": "<fill-your-repository-here>",
  "nativescript": {
    "id": "org.nativescript.hiding",
    "tns-ios": {
      "version": "3.1.0"
    },
    "tns-android": {
      "version": "3.4.0"
    }
  },
  "dependencies": {
    "@angular/animations": "~4.4.1",
    "@angular/common": "~4.4.1",
    "@angular/compiler": "~4.4.1",
    "@angular/core": "~4.4.1",
    "@angular/forms": "~4.4.1",
    "@angular/http": "~4.4.1",
    "@angular/platform-browser": "~4.4.1",
    "@angular/platform-browser-dynamic": "~4.4.1",
    "@angular/router": "~4.4.1",
    "crypto-js": "^3.1.9-1",
    "nativescript-angular": "^4.4.1",
    "nativescript-background-http": "^3.0.0",
    "nativescript-fresco": "~3.0.6",
    "nativescript-geolocation": "~3.0.1",
    "nativescript-google-maps-sdk": "^2.4.2",
    "nativescript-iqkeyboardmanager": "^1.1.0",
    "nativescript-master-technology": "^1.1.1",
    "nativescript-platform-css": "^1.6.5",
    "nativescript-sqlite": "2.0.1",
    "nativescript-theme-core": "^1.0.4",
    "nativescript-unit-test-runner": "^0.3.4",
    "oauth-signature": "^1.3.1",
    "reflect-metadata": "~0.1.10",
    "rxjs": "~5.4.3",
    "tns-core-modules": "^3.4.0",
    "util": "^0.10.3",
    "zone.js": "~0.8.2"
  },
  "devDependencies": {
    "@angular/compiler-cli": "~4.4.1",
    "@ngtools/webpack": "1.6.2",
    "babel-traverse": "6.26.0",
    "babel-types": "6.26.0",
    "babylon": "6.18.0",
    "copy-webpack-plugin": "~4.0.1",
    "extract-text-webpack-plugin": "2.1.2",
    "jasmine-core": "^2.8.0",
    "karma": "^1.7.1",
    "karma-jasmine": "^1.1.0",
    "karma-nativescript-launcher": "^0.4.0",
    "lazy": "1.0.11",
    "nativescript-css-loader": "~0.26.1",
    "nativescript-dev-sass": "^1.3.3",
    "nativescript-dev-typescript": "~0.5.0",
    "nativescript-dev-webpack": "^0.8.0",
    "raw-loader": "~0.5.1",
    "resolve-url-loader": "^2.1.0",
    "tns-platform-declarations": "^3.3.0",
    "typescript": "^2.5.2",
    "webpack": "~2.7.0",
    "webpack-sources": "~1.0.1",
    "webpack-bundle-analyzer": "^2.8.2",
    "nativescript-worker-loader": "~0.8.1"
  },
  "scripts": {
    "ns-bundle": "ns-bundle",
    "publish-ios-bundle": "npm run ns-bundle --ios --publish-app",
    "generate-android-snapshot": "generate-android-snapshot --targetArchs arm,arm64,ia32 --install",
    "start-android-bundle": "npm run ns-bundle --android --run-app",
    "start-ios-bundle": "npm run ns-bundle --ios --run-app",
    "build-android-bundle": "npm run ns-bundle --android --build-app",
    "build-ios-bundle": "npm run ns-bundle --ios --build-app"
  }
}

Any ideas?


#2

Ahh, I think this has something to do with it :slight_smile:

I guess the way to do it now is:
tns build android --bundle

Now getting different errors, but will wade through them.


#3

These links might help others who run into this:


#4

After going through the webpack 0.9.0 how to upgrade instructions in the above link I’m getting the following error when running tns build android --bundle:


Running webpack for android...

D:\a\webpack.config.js:164
        new nsWebpack.UrlResolvePlugin({
        ^
TypeError: nsWebpack.UrlResolvePlugin is not a constructor
    at getPlugins (D:\a\webpack.config.js:164:9)
    at module.exports.env (D:\a\webpack.config.js:31:21)
    at handleFunction (D:\a\node_modules\webpack\lib\prepareOptions.js:26:13)
    at prepareOptions (D:\a\node_modules\webpack\lib\prepareOptions.js:11:13)
    at requireConfig (D:\a\node_modules\webpack\bin\convert-argv.js:98:14)
    at D:\a\node_modules\webpack\bin\convert-argv.js:104:17
    at Array.forEach (native)
    at module.exports (D:\a\node_modules\webpack\bin\convert-argv.js:102:15)
    at yargs.parse (D:\a\node_modules\webpack\bin\webpack.js:171:41)
    at Object.Yargs.self.parse (D:\a\node_modules\webpack\node_modules\yargs\yargs.js:533:18)
    at Object.<anonymous> (D:\a\node_modules\webpack\bin\webpack.js:152:7)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
Executing webpack failed with exit code 1.

Pretty sure the step that went wrong was that running ./node_modules/.bin/update-ns-webpack --config --deps didn’t seem to modify my previous webpack.config.js so it’s probably out of date for the new version.

Anyone else get stuck here?

Note I’m on windows 10 so I had to run the update-ns-webpack inside the windows linux subsystem, but it did seem to run without error.

ISSUE RESOLUTION - this particular problem was solved by deleting the webpack.config.js file and then running npm install nativescript-dev-webpack@0.9.0 to regenerate it.


#5

Also when running tns run android I get:

System.err: TypeError: document.createElement is not a function
System.err: File: "<unknown>, line: 1, column: 265
System.err:
System.err: StackTrace:
System.err:     Frame: function:'ImmediateDefinition.canUseReadyStateChange', file:'file:///data/data/org.nativescript.a/files/app/tns_modules/rxjs/util/Immediate.js', line: 56, column: 69
System.err:     Frame: function:'ImmediateDefinition', file:'file:///data/data/org.nativescript.a/files/app/tns_modules/rxjs/util/Immediate.js', line: 30, column: 27

Others were getting this and recommended to change all references to rxjs/rx… ie change import { Observable } from 'rxjs/rx'; to import { Observable } from 'rxjs/Observable';

This hasn’t fixed it for me though.


#6

It’s fair to note that that plugin is no longer needed after the upgrade. They removed it from the plugins. It’s a shame they don’t commit the webpack.config.js file in demo app so everyone could see that change.


#7
System.err: TypeError: document.createElement is not a function

I have same error on android for both non-webpack and webpack builds. Changing imports doesn’t help.
I assume rxjs causes problems as the problem dissapears when I remove all it’s imports.


#8

Make sure you aren’t importing anything from rxjs or rxjs/Rx. Just helped someone in the Slack channel with this problem. End-up they were using Webstorm and all the imports were just defaulting to rxjs for things like BehaviorSubject, Observable, etc. Those need to be explicit imports:

Good:

import { Observable } from 'rxjs/Observable';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';

Bad:

import { Observable, BehaviorSubject } from 'rxjs';

#9

Got back to this today… rxjs imports were the source of the problem… I had missed a few of the bad imports. All Solved here.


#10

Thanks a lot! It works now.