I have updated my Vue 3 project to use Vite following these tutorials:
- Vue School: How to Migrate from Vue CLI to Vite
- 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?