Symfony UX React报错：找不到./react/controllers文件求助

算力阿峰

2026-6-13

Symfony UX React 配置报错问题

问题描述

我正尝试按照官方文档配置@symfony/ux-react，已执行以下步骤：

执行composer require symfony/ux-react
执行yarn add -D @babel/preset-react --force
执行yarn encore dev --watch
同时已在config/packages目录添加react.yaml文件。

但在引入以下代码时出现报错：

import { registerReactControllerComponents } from '@symfony/ux-react';
registerReactControllerComponents(require.context('./react/controllers', true, /\.(j|t)sx?$/));

报错信息：

"./assets/js/app.ts"包含对文件"./react/controllers"的引用，该文件未找到，请检查拼写或文件是否已移动。

尝试使用相对路径也未能解决问题，请问我遗漏了什么？

解决方案

你遗漏了创建对应目录和基础控制器文件的步骤，官方文档的这段代码默认假设你已经在assets/js/目录下创建了react/controllers文件夹，且里面至少有一个React控制器文件（比如ExampleController.jsx或ExampleController.tsx）。

按以下步骤修复：

在assets/js/目录下创建react/controllers目录结构，确保路径和代码里的./react/controllers完全匹配（Linux/macOS环境下注意路径大小写敏感）
在该目录下创建一个测试用的React控制器文件，比如HelloController.jsx，示例内容：

import { Controller } from '@hotwired/stimulus';
import React from 'react';
import ReactDOM from 'react-dom/client';

export default class extends Controller {
    connect() {
        const root = ReactDOM.createRoot(this.element);
        root.render(<h1>Hello React!</h1>);
    }
}