vue.jsvitevue-clihot-reload

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?


Solution

  • 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");
    });