Обновление с vue-cli до Vite: TypeError: невозможно прочитать свойства null (чтение «nextSibling»)
Я обновил свой проект Vue 3, чтобы использовать Vite, следуя этим урокам:
Проект работает и работает с Vite. Проблема, с которой я столкнулся, заключается в том, что когда я меняю компонент, а затем сохраняю файл, я получаю эту ошибку в консоли браузера:
Uncaught (in promise) TypeError: Cannot read properties of null (reading 'nextSibling')
Кроме того, страница становится совершенно пустой.
Однако после перезагрузки ошибка исчезает, и страница отображается с изменениями.
Я использую несколько пакетов, но не знаю, являются ли они (или какие) причиной. Это мой 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"
}
}
А это мой 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()]
});
Как я могу это исправить?
Ответы 2
Я нашел свою проблему. Я добавил тег script в заголовок моего файла index.html, а не в нижнюю часть тела.
Вот как сейчас выглядит index.html:
<!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>
Обновлять
Хотя приведенное выше решение иногда работало, ошибка все равно появлялась, но я нашел решение, которое работает постоянно.
В моем файле main.js я обернул функции app.use() и app.mount() внутри события DOMContentLoaded.
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");
});
Хороший! Я должен был быть маленькой деталью, да. Пожалуйста, примите свой ответ.
Я хочу, но не могу: Вы можете принять свой ответ через 2 дня.
Оххх, возможно, да. Если вы опубликуете это прямо, вы можете, или если это чей-то ответ, но в противном случае нет, ага. Тогда наслаждайтесь ответом!
В моем случае в шаблоне было <component :is = "{myComponent}">, переменная myComponent изменилась, и если это было undefined, то появилась эта ошибка.
Похоже, это распространенная проблема, не имеющая простого и однозначного решения. Возможно, это небольшая деталь в файлах конфигурации. Может быть, попытаться создать новый проект Vue3 и перенести его из текущего? Таким образом, вы могли бы изменить ситуацию и сообщить о решении сообществу! По крайней мере, ваш код выглядит ошибочным только со стороны HMR.