MDTabContentItem already registered

[StellarKnight]

Getting an error when using nativescript-vue, ui-material-bottom-navigation, and ui-material-tabs

  System.err: An uncaught Exception occurred on "main" thread.
  System.err: Unable to create application com.tns.NativeScriptApplication: com.tns.NativeScriptException: Error calling module function
  System.err: Error: Element for MDTabContentItem already registered.
  System.err: If this is intentional set 'overwriteExisting: true' in 'meta'

Which platform(s) does your issue occur on?

Tested on Emulator

Please, provide the following version numbers that your issue occurs with:

• CLI: 8.6.3
• Cross-platform modules: 8.6.2
• Runtime(s): 8.6.2
• Plugin(s):

  "dependencies": {
    "@nativescript-community/ui-material-bottom-navigation": "^7.2.29",
    "@nativescript-community/ui-material-button": "^7.2.29",
    "@nativescript-community/ui-material-cardview": "^7.2.29",
    "@nativescript-community/ui-material-tabs": "^7.2.29",
    "@nativescript/core": "~8.6.1",
    "nativescript-vue": "3.0.0-rc.1",
    "pinia": "^2.1.7"
  },
  "devDependencies": {
    "@nativescript/android": "8.6.2",
    "@nativescript/preview-cli": "1.0.12",
    "@nativescript/tailwind": "~2.0.1",
    "@nativescript/types": "~8.6.1",
    "@nativescript/webpack": "~5.0.0",
    "@types/node": "~17.0.21",
    "@types/webpack": "^5.28.5",
    "tailwindcss": "^3.1.8",
    "typescript": "^5.2.2"
  }

Please, tell us how to recreate the issue in as much detail as possible.

tns plugin add @nativescript-community/ui-material-bottom-navigation
tns plugin add @nativescript-community/ui-material-tabs

Is there any code involved?

import { createApp } from 'nativescript-vue';
import { createPinia } from 'pinia';
import ButtonPlugin from '@nativescript-community/ui-material-button/vue';
import CardViewPlugin from '@nativescript-community/ui-material-cardview/vue';
import BottomNavigation from '@nativescript-community/ui-material-bottom-navigation/vue';
import TabsPlugin from '@nativescript-community/ui-material-tabs/vue';
import BottomNavFrame from './frames/BottomNavFrame.vue'

const pinia = createPinia();

createApp(BottomNavFrame)
  .use(BottomNavigation)
  .use(ButtonPlugin)
  .use(CardViewPlugin)
  .use(TabsPlugin)
  .use(pinia)
  .start();

Seems like it is being registered twice or is there another way to include it?

[farfromrefuge]

@scottix yes it is because you use both TabsPlugin and BottomNavigation which both use MDTabContentItem.
The easy fix is to register components manually for one of them.
But the best solution would be to create an issue on vue3 repo. This shoud not be an error. At best a warning. But there is nothing wrong with doing this.

[StellarKnight]

Ok I was able to work around the issue.
Since I only need MDTabs that hasn't been registered

import { createApp } from 'nativescript-vue';
import { createPinia } from 'pinia';
import ButtonPlugin from '@nativescript-community/ui-material-button/vue';
import BottomNavigation from '@nativescript-community/ui-material-bottom-navigation/vue';
import CardViewPlugin from '@nativescript-community/ui-material-cardview/vue';
import { Tabs } from '@nativescript-community/ui-material-tabs';
import FloatingActionButtonPlugin from '@nativescript-community/ui-material-floatingactionbutton/vue';
import BottomNavFrame from './frames/BottomNavFrame.vue'

const pinia = createPinia();
const app = createApp(BottomNavFrame);

app.use(BottomNavigation)
  .use(ButtonPlugin)
  .use(CardViewPlugin)
  .use(FloatingActionButtonPlugin)
  .use(pinia);

app.registerElement('MDTabs', () => Tabs, {
    model: {
        prop: 'selectedIndex',
        event: 'selectedIndexChange'
    },
    component: require('@nativescript-community/ui-material-tabs/vue/component').default
  });

app.start();

One thing you could change on your install script for each registerElement
Vue.registerElement('MDTabStrip', () => TabStrip, { overwriteExisting: true });

[farfromrefuge]

@scottix great you got it to work