CODEWITHSUNDEEP
vue.jsvitevue-clihot-reload
Samball
Samball

Reputation: 843

Updating from vue-cli to Vite: TypeError: Cannot read properties of null (reading 'nextSibling')

I have updated my Vue 3 project to use Vite following these tutorials:

  1. Vue School: How to Migrate from Vue CLI to Vite
  2. Medium: Vue-cli -> Vite migration

The project is working and running with Vite. The problem I am having is that when I change a component and then save the file I get this error in the browser console:

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'nextSibling')

Also the page goes completly blank.

However after a reload the error goes away and the page is displayed with the change.

I am using multiple packages but I don't know if (or which) they are the cause. This is my package.json:

{
    "name": "vue-project",
    "version": "0.1.0",
    "private": true,
    "scripts": {
        "dev": "vite",
        "build": "vite build",
        "preview": "vite preview",
        "format": "prettier . --write"
    },
    "dependencies": {
        "@fortawesome/fontawesome-free": "^6.5.1",
        "@vitejs/plugin-vue": "^5.0.4",
        "@vueuse/core": "^10.9.0",
        "chart.js": "^4.4.2",
        "dayjs": "^1.11.10",
        "firebase": "^10.9.0",
        "firebase-admin": "^12.1.0",
        "pinia": "^2.1.7",
        "primeicons": "^6.0.1",
        "primevue": "^3.50.0",
        "register-service-worker": "^1.7.2",
        "vite": "^5.2.11",
        "vue": "^3.2.39",
        "vue-chartjs": "^5.3.1",
        "vue-router": "^4.0.3"
    },
    "devDependencies": {
        "autoprefixer": "^10.4.18",
        "postcss": "^8.4.37",
        "prettier": "^2.8.8",
        "tailwindcss": "^3.4.1"
    }
}

And this is my vite.config.mjs:

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { fileURLToPath } from "url";
import path from "path";

const filename = fileURLToPath(import.meta.url);
const pathSegments = path.dirname(filename);

export default defineConfig({
    resolve: {
        alias: {
            "@": path.resolve(pathSegments, "./src")
        },
        extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json"]
    },
    plugins: [vue()]
});

How can I fix this?

Upvotes: 3

Views: 1964

Answers (3)

Jaime Quiroz
Jaime Quiroz

Reputation: 1

In my case I had to wrap my header component and router-view in a div.

<div>
    <AppHeader />
    <router-view v-slot="{ Component }">
        <transition name="page-fade" mode="out-in">
            <component :is="Component" />
        </transition>
    </router-view>
</div>

Upvotes: 0

d9k
d9k

Reputation: 2044

In my case I had <component :is="{myComponent}"> in template, variable myComponent changed and if it was undefined then this error appeared

Upvotes: 0

Samball
Samball

Reputation: 843

I found my problem. I had added the script tag to the head of my index.html file instead of at the bottom of the body.

This is what the index.html looks like now:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <link
            rel="icon"
            href="/favicon.ico"
        />
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0"
        />
        <title>Vue project</title>
    </head>
    <body>
        <div id="app"></div>
        <script
            type="module"
            src="/src/main.js"
        ></script>
    </body>
</html>

Update

Although the above solution did work sometimes I still got the error but I found a solution that works all the time.

In my main.js file I wrapped the app.use() and app.mount() function inside a DOMContentLoaded event.

document.addEventListener("DOMContentLoaded", async () => {
    app.use(createPinia());

    const userStore = useAuthStore();
    await userStore.init();

    app.use(router);

    app.use(PrimeVue, {
        unstyled: true,
        pt: lara
    });
    app.use(ToastService);
    app.use(ConfirmationService);

    // Often used PrimeVue components
    app.component("Divider", Divider);
    app.component("Button", Button);

    app.mount("#app");
});

Upvotes: 1

Related Questions