fix: switch to @vitejs/plugin-react-swc and manual component registration

- Replace @vitejs/plugin-react with @vitejs/plugin-react-swc to fix
  React Refresh preamble detection error in cross-origin Docker setup
- Register React components manually via window.resolveReactComponent
  since ux-react's registerReactControllerComponents uses Webpack's
  require.context API which is incompatible with Vite

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
thibaud-leclere
2026-03-28 13:40:16 +01:00
parent 04301642bc
commit a6064c2bdb
4 changed files with 304 additions and 5 deletions

17
assets/bootstrap.js vendored
View File

@@ -1,6 +1,19 @@
import { startStimulusApp } from '@symfony/stimulus-bundle';
import { registerReactControllerComponents } from '@symfony/ux-react';
const app = startStimulusApp();
registerReactControllerComponents(import.meta.glob('./react/controllers/**/*.jsx', { eager: true }));
// Register React components for {{ react_component() }} Twig function.
// We register them manually because @symfony/ux-react's registerReactControllerComponents
// expects Webpack's require.context API, which is not available in Vite.
const reactControllers = import.meta.glob('./react/controllers/**/*.jsx', { eager: true });
window.resolveReactComponent = (name) => {
const key = `./react/controllers/${name}.jsx`;
const module = reactControllers[key];
if (!module) {
const available = Object.keys(reactControllers)
.map(k => k.replace('./react/controllers/', '').replace('.jsx', ''));
throw new Error(`React controller "${name}" does not exist. Possible values: ${available.join(', ')}`);
}
return module.default;
};