Symfony 7.0.5集成React-UX执行npm run build遇3个模块未找到错误

问题描述 #

使用Symfony 7.0.5创建项目并添加React-UX组件时，执行npm run build出现以下模块未找到错误：

Module build failed: Module not found:
"./assets/app.js" contains a reference to the file "@symfony/ux-react".
This file can not be found, please check it for typos or update it if the file got moved.

"./assets/bootstrap.js" contains a reference to the file "@symfony/stimulus-bundle".
This file can not be found, please check it for typos or update it if the file got moved.

"./assets/react/controllers/Hello.jsx" contains a reference to the file "react".
This file can not be found, please check it for typos or update it if the file got moved.

根因分析 #

虽然通过Composer安装了symfony/ux-react和symfony/stimulus-bundle等PHP包，但对应的前端JavaScript模块并未安装到项目中，导致Webpack Encore无法解析这些导入路径。

解决方案 #

1. 安装缺失的前端依赖 #

在项目根目录执行以下命令，安装所有需要的前端包：

npm install react react-dom @symfony/stimulus-bundle @symfony/ux-react --save-dev

2. 验证依赖安装结果 #

检查package.json的devDependencies部分，确认新增以下类别的条目：

"react": "^x.x.x",
"react-dom": "^x.x.x",
"@symfony/stimulus-bundle": "^x.x.x",
"@symfony/ux-react": "^x.x.x"

3. 重新执行构建命令 #

运行构建命令，确认错误已消除：

npm run build

补充说明 #

• Symfony UX组件的PHP包仅提供后端集成逻辑，前端代码需通过npm/yarn单独安装；
• Webpack Encore依赖node_modules目录中的包解析导入语句，确保所有引用的模块都已完成安装。

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