Nativescript-cli: Calling js method onCreate failed, Error: Failed to load component from module: ./views/login/login.xml or file: null, after upgrading to 5.4.0

Created on 21 May 2019 · 12Comments · Source: NativeScript/nativescript-cli

System.err: java.lang.RuntimeException: Unable to start activity ComponentInfo{br.com.eduxe.app/com.tns.NativeScriptActivity}: com.tns.NativeScriptException:
System.err: Calling js method onCreate failed
System.err:
System.err: Error: Failed to load component from module: ./views/login/login.xml or file: null
System.err: File: "file:///data/data/br.com.eduxe.app/files/app/vendor.js, line: 20415, column: 8
System.err:
System.err: StackTrace:
System.err: Frame: function:'loadInternal', file:'file:///data/data/br.com.eduxe.app/files/app/vendor.js', line: 20415, column: 15
System.err: Frame: function:'loadPage', file:'file:///data/data/br.com.eduxe.app/files/app/vendor.js', line: 20336, column: 27
System.err: Frame: function:'', file:'file:///data/data/br.com.eduxe.app/files/app/vendor.js', line: 20359, column: 12
System.err: Frame: function:'', file:'file:///data/data/br.com.eduxe.app/files/app/vendor.js', line: 20373, column: 20
System.err: Frame: function:'push.../node_modules/tns-core-modules/ui/frame/frame-common.js.FrameBase.navigate', file:'file:///data/data/br.com.eduxe.app/files/app/vendor.js', line: 28154, column: 30
System.err: Frame: function:'push.../node_modules/tns-core-modules/ui/frame/frame.js.ActivityCallbacksImplementation.setActivityContent', file:'file:///data/data/br.com.eduxe.app/files/app/vendor.js', line: 29618, column: 34
System.err: Frame: function:'push.../node_modules/tns-core-modules/ui/frame/frame.js.ActivityCallbacksImplementation.onCreate', file:'file:///data/data/br.com.eduxe.app/files/app/vendor.js', line: 29448, column: 14
System.err: Frame: function:'push.../node_modules/tns-core-modules/ui/frame/activity.js.NativeScriptActivity.onCreate', file:'file:///data/data/br.com.eduxe.app/files/app/vendor.js', line: 27296, column: 25
System.err:
System.err: at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:3086)
System.err: at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:3229)
System.err: at android.app.servertransaction.LaunchActivityItem.execute(LaunchActivityItem.java:78)
System.err: at android.app.servertransaction.TransactionExecutor.executeCallbacks(TransactionExecutor.java:108)
System.err: at android.app.servertransaction.TransactionExecutor.execute(TransactionExecutor.java:68)
System.err: at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1926)
System.err: at android.os.Handler.dispatchMessage(Handler.java:106)
System.err: at android.os.Looper.loop(Looper.java:214)
System.err: at android.app.ActivityThread.main(ActivityThread.java:6981)
System.err: at java.lang.reflect.Method.invoke(Native Method)
System.err: at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:493)
System.err: at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1445)
System.err: Caused by: com.tns.NativeScriptException:
System.err: Calling js method onCreate failed
System.err:
System.err: Error: Failed to load component from module: ./views/login/login.xml or file: null
System.err: File: "file:///data/data/br.com.eduxe.app/files/app/vendor.js, line: 20415, column: 8

Why this error can't be more friendly?

migration-to-bundle

Source

AlexandreCarvalhoDeMelo

All 12 comments

I've tried doing this
npm install typescript@latest
npm install tns-core-modules@latest
npm install nativescript-dev-webpack@latest

Then updating one of my packages (status-bar) to 5.0
then npm install and tns run android
same error.

AlexandreCarvalhoDeMelo on 21 May 2019

Hey @SuperAssassinNinja,

Thank you for reporting this issue!

Can you please give us more information for your app and exact steps you're executing so we can reproduce the problem on our side?

Fatme on 21 May 2019

Ok sorry for being so brief
The app is a facebook-like for schools
This is my Package Json
{
"description": "Pocoyo - Eduxe App",
"license": "SEE LICENSE IN ",
"readme": "Application conecting Wenodes",
"repository": "",
"nativescript": {
"id": "br.com.eduxe.app",
"tns-ios": {
"version": "5.0.0"
},
"tns-android": {
"version": "5.4.0"
}
},
"dependencies": {
"ajv": "^6.10.0",
"moment": "^2.22.1",
"nativescript-background-http": "^3.2.3",
"nativescript-camera": "^4.0.2",
"nativescript-exoplayer": "^3.4.1",
"nativescript-fonticon": "^1.1.1",
"nativescript-fresco": "^3.0.7",
"nativescript-gradient": "2.0.1",
"nativescript-handle-file": "4.0.0",
"nativescript-iqkeyboardmanager": "1.3.0",
"nativescript-loading-indicator": "2.4.0",
"nativescript-master-technology": "^1.1.1",
"nativescript-material-icons": "^1.0.3",
"nativescript-mediafilepicker": "^2.0.11",
"nativescript-orientation": "^2.2.0",
"nativescript-permissions": "^1.2.3",
"nativescript-photoviewer": "^1.4.0",
"nativescript-plugin-firebase": "^8.3.2",
"nativescript-screen-orientation": "^2.0.0",
"nativescript-statusbar": "^5.0.0",
"nativescript-theme-core": "^1.0.4",
"nativescript-timedatepicker": "^1.2.1",
"nativescript-ui-autocomplete": "^3.6.0",
"nativescript-ui-calendar": "^3.5.2",
"nativescript-ui-listview": "^3.7.1",
"nativescript-ui-sidedrawer": "^4.0.0",
"punycode": "2.1.0",
"tns-core-modules": "^5.4.0"
},
"devDependencies": {
"babel-traverse": "6.26.0",
"babel-types": "6.26.0",
"babylon": "6.18.0",
"filewalker": "0.1.3",
"lazy": "1.0.11",
"nativescript-dev-typescript": "^0.7.1",
"nativescript-dev-webpack": "^0.22.0",
"tns-platform-declarations": "^4.0.0",
"typescript": "^3.4.5"
},
"scripts": {
"post.npm.update": "bash ./scripts/configure"
},
"author": "Eduxe"
}

What happens during build

tns build android
Entrypoint bundle = runtime.js vendor.js bundle.js
[./ sync ^./app.(css|scss|less|sass)$] . sync nonrecursive ^./app.(css|scss|less|sass)$ 174 bytes {bundle} [built]
[./ sync recursive (root|page).(xml|css|js|ts|scss)$] . sync (root|page).(xml|css|js|ts|scss)$ 160 bytes {bundle} [built]
[./app.css] 9.14 KiB {bundle} [optional] [built]
[./app.ts] 2.8 KiB {bundle} [built]
[./bundle-config.ts] 0 bytes {bundle} [built]
[./models/theme.ts] 5.09 KiB {bundle} [built]
[./package.json] 815 bytes {bundle} [optional] [built]
- 193 hidden modules

ERROR in /Users/alexandre.melo/projetos/connect-mobile/app/view-models/river-view-model.ts
ERROR in /Users/alexandre.melo/projetos/connect-mobile/app/view-models/river-view-model.ts(438,34):
TS2304: Cannot find name 'IQMediaPickerController'.

ERROR in /Users/alexandre.melo/projetos/connect-mobile/app/view-models/river-view-model.ts
ERROR in /Users/alexandre.melo/projetos/connect-mobile/app/view-models/river-view-model.ts(440,42):
TS2304: Cannot find name 'PHAssetMediaTypeImage'.

ERROR in /Users/alexandre.melo/projetos/connect-mobile/app/view-models/river-view-model.ts
ERROR in /Users/alexandre.melo/projetos/connect-mobile/app/view-models/river-view-model.ts(440,65):
TS2304: Cannot find name 'PHAssetMediaTypeVideo'.

ERROR in /Users/alexandre.melo/projetos/connect-mobile/app/view-models/river-view-model.ts
ERROR in /Users/alexandre.melo/projetos/connect-mobile/app/view-models/river-view-model.ts(464,25):
TS2304: Cannot find name 'kUTTypeMPEG4Audio'.

ERROR in /Users/alexandre.melo/projetos/connect-mobile/app/view-models/river-view-model.ts
ERROR in /Users/alexandre.melo/projetos/connect-mobile/app/view-models/river-view-model.ts(467,25):
TS2304: Cannot find name 'kUTTypeJPEG2000'.

ERROR in /Users/alexandre.melo/projetos/connect-mobile/app/views/document/open.ts
ERROR in /Users/alexandre.melo/projetos/connect-mobile/app/views/document/open.ts(180,16):
TS2339: Property 'addChild' does not exist on type 'ViewBase'.

ERROR in /Users/alexandre.melo/projetos/connect-mobile/app/views/document/open.ts
ERROR in /Users/alexandre.melo/projetos/connect-mobile/app/views/document/open.ts(205,20):
TS2339: Property 'addChild' does not exist on type 'ViewBase'.

ERROR in /Users/alexandre.melo/projetos/connect-mobile/app/views/document/open.ts
ERROR in /Users/alexandre.melo/projetos/connect-mobile/app/views/document/open.ts(206,20):
TS2339: Property 'addChild' does not exist on type 'ViewBase'.

ERROR in /Users/alexandre.melo/projetos/connect-mobile/app/views/document/open.ts
ERROR in /Users/alexandre.melo/projetos/connect-mobile/app/views/document/open.ts(215,20):
TS2339: Property 'addChild' does not exist on type 'ViewBase'.

ERROR in /Users/alexandre.melo/projetos/connect-mobile/app/views/feed/templates/image.ts
ERROR in /Users/alexandre.melo/projetos/connect-mobile/app/views/feed/templates/image.ts(2,30):
TS2307: Cannot find module 'nativescript-photoviewer'.
Webpack compilation complete.

output
Executing webpack failed with exit code 2.

tns build android

Those above are just warning, not fatal errors, they have nothing to do you with the app crashing on start (they were always shown)

This is what happens during run

tns run android

JS: HMR: Hot Module Replacement Enabled. Waiting for signal.
JS: application.start() is deprecated; use application.run() instead
JS: firebase.init done
System.err: java.lang.RuntimeException: Unable to start activity ComponentInfo{br.com.eduxe.app/com.tns.NativeScriptActivity}: com.tns.NativeScriptException:
System.err: Calling js method onCreate failed
System.err:
System.err: Error: Failed to load component from module: ./views/login/login.xml or file: null
System.err: File: "file:///data/data/br.com.eduxe.app/files/app/vendor.js, line: 20415, column: 8
System.err:
System.err: StackTrace:
System.err: Frame: function:'loadInternal', file:'file:///data/data/br.com.eduxe.app/files/app/vendor.js', line: 20415, column: 15
System.err: Frame: function:'loadPage', file:'file:///data/data/br.com.eduxe.app/files/app/vendor.js', line: 20336, column: 27
System.err: Frame: function:'', file:'file:///data/data/br.com.eduxe.app/files/app/vendor.js', line: 20359, column: 12
System.err: Frame: function:'', file:'file:///data/data/br.com.eduxe.app/files/app/vendor.js', line: 20373, column: 20
System.err: Frame: function:'push.../node_modules/tns-core-modules/ui/frame/frame-common.js.FrameBase.navigate', file:'file:///data/data/br.com.eduxe.app/files/app/vendor.js', line: 28154, column: 30
System.err: Frame: function:'push.../node_modules/tns-core-modules/ui/frame/frame.js.ActivityCallbacksImplementation.setActivityContent', file:'file:///data/data/br.com.eduxe.app/files/app/vendor.js', line: 29618, column: 34
System.err: Frame: function:'push.../node_modules/tns-core-modules/ui/frame/frame.js.ActivityCallbacksImplementation.onCreate', file:'file:///data/data/br.com.eduxe.app/files/app/vendor.js', line: 29448, column: 14
System.err: Frame: function:'push.../node_modules/tns-core-modules/ui/frame/activity.js.NativeScriptActivity.onCreate', file:'file:///data/data/br.com.eduxe.app/files/app/vendor.js', line: 27296, column: 25

AlexandreCarvalhoDeMelo on 21 May 2019

Hey folks
Looking and pre-compiled file i found this

   The line below is throwing the error, to get the componentModule, we need fileName, context, moduleNamePath, but the first and second are coming empty; This is the output i get
    **throw new Error(' Error :::: '+fileName+' '+context+' '+moduleNamePath); //  Error :::: null null /data/data/br.com.eduxe.app/files/app/views/login/login **

}
return componentModule;

}

AlexandreCarvalhoDeMelo on 21 May 2019

Also this seems to be part of the problem

from my app.ts
if (appSettingsModule.getString("hash") && !appSettingsModule.hasKey('isFirstAccess')) {
app.start({moduleName: "views/feed/feed"});
} else {
app.start({moduleName: "views/login/login"});
}

I've tried changing from start to run, but no lucky

AlexandreCarvalhoDeMelo on 21 May 2019

Hi @SuperAssassinNinja,

I will focus on your Failed to load component from module: ./views/login/login.xml or file: null error.

Maybe the main difference between the legacy workflow and the bundle one is the way we register and load the pages and custom components. The above-mentioned error says that your login page is not included in the app bundle.

I strongly recommend you read the blog post describing this workflow switch. It describes how were we copying the whole app folder when using the legacy workflow compared to copying only the required files when using the bundle workflow (reducing the app size). The important part for this issue is that in order to include all of the required app pages and custom components, the bundle workflow is using a few conventions described in this thread.

In short, the bundle workflow is including only the pages ending with page and root and in order to get your app working, you need to rename this login.xml, login.ts and login.css files to login-page.xml, login-page.ts and login-page.css. Bear in mind that you have to do this for all of your pages and also fix the page navigations.

Please, update us back if you still have any errors after you follow the page conventions or manually register your pages as described in the above-related thread.

DimitarTachev on 22 May 2019

i'll try and report back to you thanks!

AlexandreCarvalhoDeMelo on 22 May 2019

👍1

Hey @SuperAssassinNinja ,

Did you have a chance to give it a try and see if it resolves your issues? Can we mark this issue as resolved?

rosen-vladimirov on 27 May 2019

Hey, i've trying chancing some files to *filename-page, and then some of the app start to work, but still i wasn't able to do much or go much further, is there any real tutorial to migrate the workflow, to the new webpack workflow?

AlexandreCarvalhoDeMelo on 27 May 2019

Just trying now to convert a non-Angular, non-Webpack {N} Typescript app to the new bundle workflow with {N} 5.4 (to get ready for 6.0). If I'm following correctly, to make this work, it is a requirement to rename all views and components so that "page" or "root" is in the file name?

That's a...pretty unpleasant change. I'm also not sure it will be obvious to new {N} developers that this convention must be followed or the app won't compile correctly.

I get the intent, but are there any other options for projects that don't or can't follow this naming convention? Perhaps register all modules in the app directory but only those used from node_modules?

toddanglin on 1 Jun 2019

👍1

As I follow-up, I went through the manual steps to rename all views, update all navigation, and fix any other related problems (especially with builder) to get my app working with Webpack. Happy to say it's working now, but it was heavy lifting.

I did ultimately customize the Webpack regex to also look for views with widget in the file name (similar to fragment) to better accommodate lots of "partial" views in my app (mostly content loaded in modals).

Will write up my experience soon. My biggest concern for new projects (after the fact) is that the now required naming conventions are non-obvious. The {N} docs will need to be updated to make it very clear that these extensions are expected in view names.

toddanglin on 4 Jun 2019

👍1

I'm closing this issue as starting from this PR and NativeScript 6.0, we are automatically including all app files instead of requiring the old -page or -root convention.

You could also take a look at this issue comment for a way of excluding files from the Webpack compilation.

DimitarTachev on 2 Aug 2019

Was this page helpful?

0 / 5 - 0 ratings