Nativescript: Cannot read property 'ios' of undefined in core/ui/tabs

[komenixx]

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
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
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<…>```

[komenixx]

Its caused by more child elements in element <TabContentItem>.

Can you provide better error message please ?

[shirakaba]

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.

[shirakaba]

Its caused by more child elements in element .

As far as I'd found, it rather happens when trying to add any TabStripItem to a TabStrip. Maybe both should be looked into.

[komenixx]

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>

[shirakaba]

@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.

[rigor789]

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...

[farfromrefug]

@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

[shirakaba]

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.

[farfromrefug]

@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.