NativeScript
Cannot read property 'ios' of undefined in core/ui/tabs
Environment
- CLI: 7.0.13
- @nativescript/core 7.0.13
- Android Runtime: 7.0.1
- iOS Runtime: 7.0.6
- XCode Version: 12.2
- Plugin(s): None
Describe the bug
run
npm run ios throws error, android works ok
MacBook:angular mac$ npm run ios
> [email protected] ios /Users/mac/Documents/project/frontend/angular
> ns run ios --no-hmr
Searching for devices...
iTunes is not installed. Install it on your system and run this command again.
Preparing project...
File change detected. Starting incremental webpack compilation...
webpack is watching the files…
Hash: 98c140e3c1129690d358
Version: webpack 4.43.0
Time: 35579ms
Built at: 19. 11. 2020 18:38:42
Asset Size Chunks Chunk Names
0.js 181 KiB 0 [emitted]
1.js 232 KiB 1 [emitted]
2.js 124 KiB 2 [emitted]
3.js 48.7 KiB 3 [emitted]
4.js 81.4 KiB 4 [emitted]
5.js 195 KiB 5 [emitted]
6.js 39.3 KiB 6 [emitted]
7.js 1.08 KiB 7 [emitted]
assets/12615.eps 9.22 MiB [emitted]
assets/12615.jpg 5.05 MiB [emitted]
assets/avatar.png 12.8 KiB [emitted]
assets/beach.jpg 1.27 MiB [emitted]
assets/dust.jpg 2.74 MiB [emitted]
assets/fb.png 78.4 KiB [emitted]
assets/flaticons/animal.svg 9.46 KiB [emitted]
assets/flaticons/car.svg 6.73 KiB [emitted]
assets/flaticons/chat.svg 1.88 KiB [emitted]
assets/flaticons/discussion.svg 18.8 KiB [emitted]
assets/flaticons/engineer.svg 6.05 KiB [emitted]
assets/flaticons/farming.svg 4.57 KiB [emitted]
assets/flaticons/form.svg 1.17 KiB [emitted]
assets/flaticons/house.svg 5.76 KiB [emitted]
assets/flaticons/human.svg 3.46 KiB [emitted]
assets/flaticons/offer.png 1.67 KiB [emitted]
assets/flaticons/offer.svg 7.33 KiB [emitted]
assets/flaticons/party.svg 12.5 KiB [emitted]
assets/flaticons/quest.svg 8.51 KiB [emitted]
assets/flaticons/search.svg 5.68 KiB [emitted]
assets/flaticons/top.svg 2.4 KiB [emitted]
assets/gardener.jpg 1.28 MiB [emitted]
assets/group.png 5.2 MiB [emitted]
assets/handyman.jpg 1.85 MiB [emitted]
assets/logo/appstore.png 2.92 KiB [emitted]
assets/logo/black.svg 5.17 KiB [emitted]
assets/logo/blue.svg 5.35 KiB [emitted]
assets/logo/fav.png 2.18 KiB [emitted]
assets/logo/googleplay.png 5.26 KiB [emitted]
assets/logo/logo.png 14.3 KiB [emitted]
assets/logo/logo.svg 7.26 KiB [emitted]
assets/logo/white.svg 5.35 KiB [emitted]
assets/ngx-rocket-logo.png 16.7 KiB [emitted]
assets/[email protected] 12.2 KiB [emitted]
assets/surf.jpg 3.01 MiB [emitted]
assets/thumb.jpg 2.19 MiB [emitted]
bundle.js 369 KiB bundle [emitted] bundle
fonts/fa-regular-400.ttf 54.3 KiB [emitted]
fonts/fa-solid-900.ttf 298 KiB [emitted]
package.json 4.96 KiB [emitted]
runtime.js 15.5 KiB runtime [emitted] runtime
tns_modules/@nativescript/core/inspector_modules.js 797 bytes tns_modules/@nativescript/core/inspector_modules [emitted] tns_modules/@nativescript/core/inspector_modules
vendor.js 23.1 MiB vendor [emitted] vendor
Entrypoint bundle = runtime.js vendor.js bundle.js
Entrypoint tns_modules/@nativescript/core/inspector_modules = runtime.js vendor.js tns_modules/@nativescript/core/inspector_modules.js
[./app.css] 1.05 KiB {bundle} [built]
[./app/@core/core.module.tns.ts] 2.9 KiB {bundle} [built]
[./app/@shared/file-uploader/file-uploader.component.tns.ts] 7.41 KiB {bundle} [built]
[./app/@shared/shared.module.tns.ts] 1.23 KiB {bundle} [built]
[./app/app-routing.module.tns.ts] 1.05 KiB {bundle} [built]
[./app/app.common.ts] 131 bytes {bundle} [built]
[./app/app.component.tns.ts] 5.13 KiB {bundle} [built]
[./app/app.module.tns.ts] 2.79 KiB {bundle} [built]
[./app/auth/auth.module.tns.ts] 1.58 KiB {bundle} [built]
[./app/auth/auth.provider.ts] 749 bytes {bundle} [built]
[./app/auth/authentication.service.tns.ts] 3.79 KiB {bundle} [built]
[./app/auth/credentials.service.tns.ts] 1.83 KiB {bundle} [built]
[./app/shell/shell.module.tns.ts] 2.74 KiB {bundle} [built]
[./environments/environment.ts] 625 bytes {bundle} [built]
[./main.tns.ts] 1.46 KiB {bundle} [built]
+ 833 hidden modules
Webpack compilation complete. Watching for file changes.
Webpack build done!
Updating runtime package.json with configuration values...
Project successfully prepared (ios)
Installing on device 6D3A7EFE-D938-456B-9BF4-58326E8FA5C5...
Successfully installed on device with identifier '6D3A7EFE-D938-456B-9BF4-58326E8FA5C5'.
Successfully transferred all files on device 6D3A7EFE-D938-456B-9BF4-58326E8FA5C5.
Restarting application on device 6D3A7EFE-D938-456B-9BF4-58326E8FA5C5...
Successfully synced application org.nativescript.zaridto on device 6D3A7EFE-D938-456B-9BF4-58326E8FA5C5.
(RunningBoardServices) [com.apple.runningboard:connection] Identity resolved as application<org.nativescript.zaridto>
CONSOLE LOG: [I18nService] Language set to en-US
CONSOLE LOG: Angular is running in development mode. Call enableProdMode() to enable production mode.
CONSOLE ERROR: ERROR TypeError: Cannot read property 'frame' of undefined
***** Fatal JavaScript exception - application has been terminated. *****
NativeScript encountered a fatal error: Uncaught TypeError: Cannot read property 'ios' of undefined
at
getViewController(file: node_modules/@nativescript/core/ui/tabs/index.ios.js:535:0)
at (file: node_modules/@nativescript/core/ui/tabs/index.ios.js:582:0)
at setViewControllers(file: node_modules/@nativescript/core/ui/tabs/index.ios.js:581:0)
at [tabStrip:setNative](file: node_modules/@nativescript/core/ui/tabs/index.ios.js:944:0)
at applyAllNativeSetters(file: node_modules/@nativescript/core/ui/core/properties/index.js:1078:0)
at initNativeView(file: node_modules/@nativescript/core/ui/core/properties/index.js:1021:0)
at onResumeNativeUpdates(file: node_modules/@nativescript/core/ui/core/view-base/index.js:695:22)
at _resumeNativeUpdates(file: node_modules/@nativescript/core/ui/core/view-base/index.js:259:0)
at onLoaded(file: node_modules/@nativescript/core/ui/core/view-base/index.js:214:0)
at onLoaded(file: node_modules/@nativescript/core/ui/tabs/index.ios.js:412:0)
at (file: node_modules/@nativescript/core/ui/core/view-base/index.js:297:0)
at callFunctionWithSuper(file: node_modules/@nativescript/core/ui/core/view-base/index.js:291:0)
at callLoaded(file: node_modules/@nativescript/core/ui/core/view-base/index.js:297:0)
at loadView(file: node_modules/@nativescript/core/ui/core/view-base/index.js:437:0)
at (file: node_modules/@nativescript/core/ui/core/view-base/index.js:216:0)
at eachChildView(file: node_modules/@nativescript/core/ui/layouts/layout-base-common.js:101:0)
at eachChild(file: node_modules/@nativescript/core/ui/core/view/view-common.js:700:0)
at onLoaded(file: node_modules/@nativescript/core/ui/core/view-base/index.js:215:0)
at (file:///ap<…>```
Its caused by more child elements in element <TabContentItem>.
Can you provide better error message please ?
Yep, it’s not just Angular; the exact same error happens in React, too. The same error arises (indeed only on iOS) no matter how simple your Tabs component is; no matter what order you build it up in; and no matter what your content views are. So I’m confident it’s an error in Core. I spent a few hours trying to find the cause, but couldn’t figure it out. So I’ve switched back to TabView for the time being, which does work on iOS.
It was introduced by the move from {N} 6 to {N} 7. Unfortunately I don’t know where the git history is between 6 and 7, so I can’t see whether anything significant was changed in the implementation.
Its caused by more child elements in element <TabContentItem>.
As far as I'd found, it rather happens when trying to add any TabStripItem to a TabStrip. Maybe both should be looked into.
In my case it works if i wrap od TabStripItem content with StackLayout element.
My Code:
<Tabs [selectedIndex]="activeTabIndex" (selectedIndexChanged)="tabChanged($event)">
<TabStrip>
<TabStripItem>
<Label text="First Tab"></Label>
</TabStripItem>
</TabStrip>
<!-- 0 -->
<TabContentItem>
<StackLayout>
<Label text="First Tab Title"></Label>
<ActivityIndicator [busy]="pending"></ActivityIndicator>
</StackLayout>
</TabContentItem>
</Tab>
@komenixx Oh, interesting. So maybe TabContentItem has been changed from a LayoutBase (accepting any number of children) to a ContentView (accepting strictly one child)? I'm sure I've only ever been putting single children in, though.
I don’t know where the git history is between 6 and 7, so I can’t see whether anything significant was changed in the implementation.
I miss that soo much myself... The only way to find the history is to look for it on the tns-core-modules branch... https://github.com/NativeScript/NativeScript/tree/tns-core-modules
I was hoping we could preserve the history with the ns7 refactor...
@rigor789 @shirakaba for your interest and for everyone else I am maintaining a fork of that component in my material suit waiting(and hoping) for N to drop that component (the main reason is that it forces N to use a podifile and prevent plugin of using a newer version of that native lib). I could look at that issue there
it forces N to use a podfile
Oh, is the Tabs component the only reason that NativeScript Core includes some Material components? I've very frequently had install problems with it, so I wouldn't mind removing it from Core. But at the same time, we do arguably need a tab navigation solution in core; was TabView implemented without a podfile? What about BottomNavigator?
We do arguably need a tab navigation solution in core
Well, that said... React Native provides no form of navigation in core, to be fair. NativeScript is generous to be providing Frame and Page, let alone several different tab navigators.
@shirakaba yes it is the only reason :D I even have to make a hook for my material components which actually breaks the N component ... Without this my plugin could not move forward with updated pod libs.
here is the PR i had made for reference https://github.com/NativeScript/NativeScript/pull/8853 the core team want to do it under their namespace. So we are waiting for them to do it.
Hello, Not sure if this is the same error, but combining a bottomnavigation with a tab causes an issue whenever you change the direction from portrait to landscape (and vice versa). Following error occurs: ***** Fatal JavaScript exception - application has been terminated. ***** NativeScript encountered a fatal error: Uncaught TypeError: Cannot read property 'frame' of undefined at updateBackgroundPositions(file: node_modules/@nativescript/core/ui/tabs/index.ios.js:335:0) at (file: node_modules/@nativescript/core/ui/tabs/index.ios.js:208:0) at (file: node_modules/@nativescript/core/ui/tabs/index.ios.js:207:0) (CoreFoundation) *** Terminating app due to uncaught exception 'NativeScript encountered a fatal error: Uncaught TypeError: Cannot read property 'frame' of undefined at updateBackgroundPositions(file: node_modules/@nativescript/core/ui/tabs/index.ios.js:335:0) at (file: node_modules/@nativescript/core/ui/tabs/index.ios.js:208:0) at (file: node_modules/@nativescript/core/ui/tabs/index.ios.js:207:0) ', reason: '(null)' *** First throw call stack: ( 0 CoreFoundation 0x00007fff20420af6 __exceptionPreprocess + 242 1 libobjc.A.dylib 0x00007fff20177e78 objc_exception_throw + 48 2 NativeScript 0x00000001043500b4 _ZN3tns21NativeScriptException15OnUncaughtErrorEN2v85LocalINS1_7MessageEEENS2_INS1_5ValueEEE + 914 3 NativeScript 0x0000000104785578 _ZN2v88internal14MessageHandler25ReportMessageNoExceptionsEPNS0_7IsolateEPKNS0_15MessageLocationENS0_6HandleINS0_6ObjectEEENS_5LocalINS_5ValueEEE + 344 4 NativeScript 0x00000001047853d9 _ZN2v88internal14MessageHandler13ReportMessageEPNS0_7IsolateEPKNS0_15Mess<…> CONSOLE INFO: HMR: Hot Module Replacement Enabled. Waiting for signal.
But could solve it by adding a Stacklayout element in the nested tabcontentitems. If someone encounters the same error
Hi @GeertSg,
Would you mind providing some more detail around how you were able to fix this using ' Stacklayout element in the nested tabcontentitems' ?
Thanks!
Hello everyone.
TABS component stopped working in {N} 8.x It worked correctly in {N} 6.x
main-page.xml
<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo">
<StackLayout>
<Tabs>
<TabStrip>
<TabStripItem>
<Label text="First Tab"></Label>
</TabStripItem>
</TabStrip>
<TabContentItem>
<StackLayout>
<Label text="First Tab Content"></Label>
</StackLayout>
</TabContentItem>
</Tabs>
</StackLayout>
</Page>
package.json
{
"name": "MyProject",
"main": "app/app.js",
"version": "1.0.0",
"private": true,
"dependencies": {
"@nativescript/core": "~8.3.0",
"@nativescript/theme": "~3.0.2"
},
"devDependencies": {
"@nativescript/android": "8.3.1",
"@nativescript/webpack": "~5.0.6"
}
}
Error:
An uncaught Exception occurred on "main" thread. Unable to start activity ComponentInfo{org.nativescript.MyProject/com.tns.NativeScriptActivity}: com.tns.NativeScriptException: Calling js method onCreate failed Error: Building UI from XML. @app-root.xml:1:1
Building UI from XML. @main-page.xml:3:9 Module 'Tabs' not found for element 'Tabs'. instanceType is not a constructor
StackTrace: java.lang.RuntimeException: Unable to start activity ComponentInfo{org.nativescript.ViiAManager/com.tns.NativeScriptActivity}: com.tns.NativeScriptException: Calling js method onCreate failed Error: Building UI from XML. @app-root.xml:1:1
Building UI from XML. @main-page.xml:3:9 Module 'Tabs' not found for element 'Tabs'. instanceType is not a constructor at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:3449) at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:3601) at android.app.servertransaction.LaunchActivityItem.execute(LaunchActivityItem.java:85) at android.app.servertransaction.TransactionExecutor.executeCallbacks(TransactionExecutor.java:135) at android.app.servertransaction.TransactionExecutor.execute(TransactionExecutor.java:95) at android.app.ActivityThread$H.handleMessage(ActivityThread.java:2066) at android.os.Handler.dispatchMessage(Handler.java:106) at android.os.Looper.loop(Looper.java:223) at android.app.ActivityThread.main(ActivityThread.java:7656) at java.lang.reflect.Method.invoke(Native Method) at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:592) at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:947) Caused by: com.tns.NativeScriptException: Calling js method onCreate failed Error: Building UI from XML. @app-root.xml:1:1 Building UI from XML. @main-page.xml:3:9 Module 'Tabs' not found for element 'Tabs'. instanceType is not a constructor at com.tns.Runtime.callJSMethodNative(Native Method) at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1302) at com.tns.Runtime.callJSMethodImpl(Runtime.java:1188) at com.tns.Runtime.callJSMethod(Runtime.java:1175) at com.tns.Runtime.callJSMethod(Runtime.java:1153) at com.tns.Runtime.callJSMethod(Runtime.java:1149) at com.tns.NativeScriptActivity.onCreate(NativeScriptActivity.java:57) at android.app.Activity.performCreate(Activity.java:7994) at android.app.Activity.performCreate(Activity.java:7978) at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1309) at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:3422) ... 11 more
@vicmasa https://blog.nativescript.org/nativescript-8-announcement/#important-note-about-bottomnavigation-and-tabs
Tabs have been removed from core in 8.0 and are now separate packages.
Closing because BottomNavigation and Tabs are no longer part of core since NativeScript 8.0:
https://blog.nativescript.org/nativescript-8-announcement/#important-note-about-bottomnavigation-and-tabs