Горячая перезагрузка не работает полностью при использовании плагина Vite/Laravel Vite внутри Wordpress ⇐ Php

[Anonymous]

Я улучшал тему WordPress, перенеся ее в Vite, следуя инструкциям, оставленным в ответе на этот пост: Как правильно создать сценарий wp-очереди и функций для запуска интерфейса Vite
Сейчас я использую более новую версию Vite и т. д., и проблема, с которой я столкнулся, в основном связана с npm run dev. Когда я запускаю сборку npm run build, все объединяется абсолютно нормально, поэтому я почти уверен, что проблема именно в горячей перезагрузке.
Вот мой package.json в моя тема WP:

Код: Выделить всё

    "scripts": {
"dev": "vite",
"watch": "npm run dev",
"build": "vite build",
"production": "vite build"
},
"devDependencies": {
"@alpinejs/collapse": "^3.13.5",
"@fancyapps/ui": "^5.0.30",
"@jeffreyvr/tailwindcss-tailpress": "^2.0.0",
"@splidejs/splide": "^4.1.4",
"@splidejs/splide-extension-auto-scroll": "^0.5.3",
"@tailwindcss/forms": "^0.5.7",
"@vitejs/plugin-vue": "^5.0.4",
"alpinejs": "^3.12.0",
"aos": "^3.0.0-beta.6",
"autoprefixer": "^10.4.0",
"browser-sync": "^2.26.14",
"browser-sync-webpack-plugin": "^2.3.0",
"cross-env": "^6.0.3",
"dotenv": "^16.0.3",
"laravel-vite-plugin": "^1.0.2",
"postcss": "^8.2.10",
"postcss-import": "^14.0.0",
"postcss-nested": "^5.0.3",
"postcss-nested-ancestors": "^2.0.0",
"resolve-url-loader": "^3.1.2",
"tailwindcss": "^3.4.0",
"vite": "^5.2.10"
}

Ниже показано, что находится в моем файле vite.config.mjs:

Код: Выделить всё

import {defineConfig} from "vite"
import path from 'path'
import vue from '@vitejs/plugin-vue'
import laravel from 'laravel-vite-plugin'
import dotenv from 'dotenv'

dotenv.config({
path: path.resolve(__dirname, '../../../../.env')
});

const domain = process.env.WP_HOME.replace(/^https?:\/\//i, '');
const domainName = domain.split('/')[0];

export default defineConfig(() => ({
base: '',
build: {
emptyOutDir: true,
manifest: true,
outDir: 'build',
assetsDir: 'assets',
},
plugins: [
laravel({
publicDirectory: 'build',
input: [
'resources/js/app.js',
'resources/css/app.css',
'resources/css/editor-style.css'
],
refresh: [
'**.php',
'**.vue',
'**.css',
]
}),
vue({
template: {
transformAssetUrls: {
// The Vue plugin will re-write asset URLs, when referenced
// in Single File Components, to point to the Laravel web
// server. Setting this to `null` allows the Laravel plugin
// to instead re-write asset URLs to point to the Vite
// server instead.
base: null,

// The Vue plugin will parse absolute URLs and treat them
// as absolute paths to files on disk.  Setting this to
// `false` will leave absolute URLs un-touched so they can
// reference assets in the public directly as expected.
includeAbsolute: false,
},
},
}),
],
server: {
https: false,
host: domainName,
},
resolve: {
alias: [
{
find: /~(.+)/,
replacement: process.cwd() + '/node_modules/$1'
},
]
}
}));

Теперь, когда я запускаю npm run dev и захожу на свой сайт, я получаю эту ошибку в консоли:

Код: Выделить всё

Uncaught SyntaxError: Cannot use import statement outside a module (at app.js:1:1)

А рассматриваемый файл (из консоли) выглядит так:

Код: Выделить всё

import Alpine from "/node_modules/.vite/deps/alpinejs.js?v=9c9d644e"
import collapse from "/node_modules/.vite/deps/@alpinejs_collapse.js?v=9c9d644e"
import AOS from "/node_modules/.vite/deps/aos.js?v=9c9d644e"
import Splide from "/node_modules/.vite/deps/@splidejs_splide.js?v=9c9d644e"

// import { AutoScroll } from '@splidejs/splide-extension-auto-scroll'

import {Fancybox} from "/node_modules/.vite/deps/@fancyapps_ui.js?v=9c9d644e"
import "/node_modules/@fancyapps/ui/dist/fancybox/fancybox.css"

window.Alpine = Alpine
Alpine.plugin(collapse)
Alpine.start()

document.addEventListener('DOMContentLoaded', function() {
AOS.init()

Fancybox.bind("[data-fancybox]")
})

И здесь я застрял, я не совсем понимаю, как это обойти. Есть ли у кого-нибудь идеи о том, где я вообще могу пойти не так?
Спасибо

Подробнее здесь: https://stackoverflow.com/questions/784 ... e-wordpres