CODEWITHSUNDEEP
vuejs3
mk23
mk23

Reputation: 1403

Vue3 component registration issue is the app.js

I am trying to register component in app.js for VUE 3 app as below:

import test1 from './components/test1.vue';
import test2 from './components/test2.vue';

createApp(test1).mount("#app").default;
createApp(test2).mount("#app").default;

But it's giving error as below. If I display only one component then it works fine.

Uncaught TypeError: Cannot read property 'nextSibling' of null
    at nextSibling (runtime-dom.esm-bundler.js:35)
    at removeFragment (runtime-core.esm-bundler.js:5719)
    at remove (runtime-core.esm-bundler.js:5685)
    at unmount (runtime-core.esm-bundler.js:5671)
    at unmountComponent (runtime-core.esm-bundler.js:5743)
    at unmount (runtime-core.esm-bundler.js:5644)
    at patch (runtime-core.esm-bundler.js:4642)
    at render (runtime-core.esm-bundler.js:5791)
    at mount (runtime-core.esm-bundler.js:4081)
    at Object.app.mount (runtime-dom.esm-bundler.js:1319)

I am accessing it in the template as below:


    <div id="app">
                <test1>
                    <test2></test2>
                </test1>
    </div>

Could anyone advise how can I get rid of this error? Thanks

Upvotes: 0

Views: 715

Answers (1)

akuiper
akuiper

Reputation: 214927

To register a component, use the App.component method instead of createApp which is meant to create a new Vue instance. Normally you would have something like the following:

const app = createApp(...)

app.component("test1", test1)
app.component("test2", test2)

app.mount('#app')

You can read more about component registration here.

Upvotes: 1

Related Questions