Tabs component giving viewClass is not a constructor

[AnthonyLenglet]

Environment Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):

• CLI: 7.0.12
• Cross-platform modules: 7.1.4
• Android Runtime: 7.0.1
• iOS Runtime: 7.1.0
• XCode Version: 12.2
• Plugin(s):

  "@nativescript-community/ui-material-bottomnavigationbar": "^5.1.16",
  "@nativescript-community/ui-material-tabs": "^5.2.5",
  "@nativescript/angular": "^11.0.1",
  "@nativescript/appsync": "~3.0.0",
  "@nativescript/camera": "^5.0.6",
  "@nativescript/core": "^7.1.4",
  "@nativescript/datetimepicker": "~2.0.0",
  "@nativescript/firebase": "~11.1.0",
  "@nativescript/geolocation": "~7.0.0",
  "@nativescript/imagepicker": "~1.0.0",
  "@nativescript/iqkeyboardmanager": "~2.0.0",
  "@nativescript/theme": "^3.0.1",
  "@nstudio/nativescript-cardview": "~2.0.0",
  "@nstudio/nativescript-checkbox": "~2.0.0",

Describe the bug

We released an update yesterday upgrading our app to NS7 after testing it for months, and seemingly out of the blue, after sending the app to the store, we're getting reports that the app is white screening when a tabs component is present, we've looked on our end and can now reproduce the issue: we're seeing the error:

JS: TypeError: viewClass is not a constructor
JS:     at ViewUtil.createView (file: node_modules/@nativescript/angular/fesm2015/nativescript-angular.js:2584:0)
JS:     at EmulatedRenderer.createElement (file: node_modules/@nativescript/angular/fesm2015/nativescript-angular.js:2784:0)
JS:     at EmulatedRenderer.createElement (file: node_modules/@nativescript/angular/fesm2015/nativescript-angular.js:3001:0)
JS:     at createElementNode (file: node_modules/@angular/core/fesm2015/core.js:6813:0)
JS:     at Module.ɵɵelementStart (file: node_modules/@angular/core/fesm2015/core.js:14542:0)

When looking at the source I do indeed see that its trying to create a ne viewClass() instance

createView(name) {
  const originalName = name;
  if (!isKnownView(name)) {
    name = 'ProxyViewContainer';
  }
  if (NativeScriptDebug.isLogEnabled()) {
    NativeScriptDebug.viewUtilLog(`Creating view: ${originalName} ${name}`);
  }
  const viewClass = getViewClass(name);
  ------> const view = new viewClass();
  const ngView = this.setNgViewExtensions(view, name);
  return ngView;
}

Things we've tried:

• using the community plugin, this crashes outright on ios and still gives a blank screen on android (albeit without any errors)
• making builds with nativescript 7.0.9-rc.2, 7.0.12 and 7.1.2 no changes there
• adding platform :ios, '10.0' to podfile
• clean node_modules + hooks + package-lock, then npm i

To Reproduce Add a Tabs component anywhere in the app

[joeczar]

I was having the same problem with Nativescript/core 8. I went back down to version 7.0.0 and it works with tabs. Hope that helps.

[FunnyGhost]

Same issue here. Seems like updating to NativeScript 8 is a no-go for now.

[edusperoni]

Tabs and BottomNavigation have been removed from NativeScript 8 (see https://github.com/NativeScript/NativeScript/blob/master/CHANGELOG.md#breaking-changes).

The main reason was that they were material components, so they added some material dependencies that were often outdated.

You can now replace them with @nativescript-community/ui-material-bottom-navigation and @nativescript-community/ui-material-tabs