Homestead环境下Laravel Breeze中Vite编译JS报错：require未定义

问题根源 #

Vite基于ES模块机制构建，浏览器原生不支持CommonJS的require()语法。编译后的代码中仍保留require调用，说明资源引入方式错误，或是JS入口文件沿用了旧的Laravel Mix风格语法。

修复步骤 #

1. 修正JS入口文件的导入语法 #

替换resources/js/app.js内容为ES模块风格的导入（适配Vite）：

import _ from 'lodash';
import axios from 'axios';
import Alpine from 'alpinejs';

window._ = _;
window.axios = axios;
window.Alpine = Alpine;

axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

Alpine.start();

2. 确保Blade模板使用@vite指令引入资源 #

检查项目主布局模板（如resources/views/layouts/app.blade.php），确认资源引入代码为：

@vite(['resources/css/app.css', 'resources/js/app.js'])

禁止手动引入build/assets/目录下的编译文件，Vite需要通过该指令处理模块依赖与浏览器兼容逻辑。

3. 清理缓存并重新构建 #

执行以下命令彻底重置依赖与编译缓存：

rm -rf node_modules package-lock.json
npm install
npm run build -- --clean
npm run dev

生产环境可替换最后一步为npm run build。

4. 强制刷新浏览器缓存 #

按Ctrl+Shift+R（Windows/Linux）或Cmd+Shift+R（Mac）强制刷新页面，避免加载旧的缓存资源。

验证标准 #

完成操作后，浏览器控制台不再出现require is not defined错误，Breeze的下拉菜单（由AlpineJS驱动）可正常展开。

内容的提问来源于stack exchange，提问作者Ale