搭建Laravel+React+Inertia+Breeze应用时app.js缺失错误求助

操作流程 #

搭建项目时执行了以下命令：

composer create-project laravel/laravel inertia-react
cd inertia-react
composer require laravel/breeze --dev
php artisan breeze:install
php artisan breeze:install react
npm install && npm run dev 

报错内容 #

Module not found: Error: Can't resolve 'D:\xampp74\htdocs\lara3\inertia-react\resources\js\app.js' in 'D:\xampp74\htdocs\lara3\inertia-react'

解决方法 #

• 核查文件结构：执行php artisan breeze:install react后，Breeze生成的React入口文件是resources/js/app.jsx，而非报错提示的.js文件，先确认该文件是否存在。
• 修改Vite配置文件：打开vite.config.js，将入口路径从resources/js/app.js改为resources/js/app.jsx，配置示例：

  import { defineConfig } from 'vite';
  import laravel from 'laravel-vite-plugin';
  import react from '@vitejs/plugin-react';
  
  export default defineConfig({
      plugins: [
          laravel({
              input: 'resources/js/app.jsx',
              refresh: true,
          }),
          react(),
      ],
  });
  

• 更新Blade模板引用：打开resources/views/app.blade.php，把@vite指令里的入口文件改为app.jsx，即：

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

• 重置依赖并重新构建：删除项目根目录下的node_modules文件夹和package-lock.json文件，然后依次执行npm install和npm run dev。
• 规范Breeze安装流程：无需先后执行php artisan breeze:install和php artisan breeze:install react，直接执行后者即可完成React版Breeze的安装，重复执行可能导致文件生成异常。

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