Laravel集成React项目执行npm start报错window is not defined如何解决

错误原因 #

你当前的报错是两个核心问题导致的：

1. package.json中配置的"start": "node resources/js/app.js"逻辑错误：直接用Node.js环境执行前端代码，Node.js不存在浏览器专属的window全局对象，自然会触发ReferenceError。
2. Laravel + laravel/ui的技术栈和纯create-react-app架构逻辑不同：create-react-app内置了webpack-dev-server前端开发服务器，npm start本质是启动这个前端服务；而Laravel默认通过Laravel Mix打包前端资源为静态文件，交由Laravel后端服务对外提供访问，没有内置CRA的前端服务配置。

解决方案 #

方案1：沿用npm start启动3000端口前端服务的习惯 #

如果你希望和之前CRA的使用逻辑保持一致，走前后端分离开发模式，按以下步骤操作：

1. 安装webpack-dev-server依赖

npm install webpack-dev-server --save-dev

2. 修改项目根目录下的webpack.mix.js配置，添加前端服务和代理规则

mix.js('resources/js/app.js', 'public/js')
    .react()
    .sass('resources/sass/app.scss', 'public/css')
    .webpackConfig({
        devServer: {
            port: 3000,
            proxy: {
                '/api': {
                    target: 'http://localhost:8000', // 对应Laravel服务的访问地址
                    changeOrigin: true
                }
            }
        }
    });

3. 修改package.json的scripts字段，替换错误的start配置

"scripts": {
    "start": "mix watch --hot", 
    // 剩余其他脚本保持不变即可
}

4. 开发时同时启动两个服务：

• 终端1执行php artisan serve启动Laravel后端服务
• 终端2执行npm start启动3000端口的前端热重载服务，直接访问localhost:3000即可调试React代码

方案2：使用Laravel默认工作流（无需额外启动3000端口） #

如果你可以适配Laravel的默认开发逻辑，操作更简单：

1. 删除package.json中错误的"start": "node resources/js/app.js"配置
2. 开发时执行两个命令：

• 终端1执行php artisan serve，启动Laravel服务，默认访问地址为localhost:8000
• 终端2执行npm run watch，监听前端代码变动，自动打包资源到public目录，代码修改后刷新页面即可生效；如果需要热重载，替换为npm run hot即可。

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