ux-react can not run with assetmapper

[langziyang]

i follow the document,

1、create new symfony project: symfony new --webapp .
2、install ux-react bundle: composer require symfony/ux-react
3、yarn add @babel/preset-react --dev --force
4、created react.yaml with https://symfony.com/bundles/ux-react/current/index.html#using-with-asset-mapper
5、copy https://github.com/symfony/ux/blob/2.x/ux.symfony.com/package.json to my package.json
6、call react_component on twig file: <div {{ react_component('Hello') }}>
7、modify app.js

// assets/app.js
import { registerReactControllerComponents } from '@symfony/ux-react';

registerReactControllerComponents(require.context('./react/controllers', true, /\.(j|t)sx?$/));

8、run yarn build-react
9、run php bin/console asset-map:compile

then i get error message on DevTools "Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "". Strict MIME type checking is enforced for module scripts per HTML spec."

[WebMamba]

You should not use Yarn and AssetMapper at the same time; you have to choose which solution suits your project best.

[smnandre]

Did you install StimulusBundle ?

[langziyang]

sometimes woring,sometimes not working,i change it to encore now

[lukepass]

Hello, I have the same problem. I followed the official guide:

https://symfony.com/bundles/ux-react/current/index.html#using-with-assetmapper

But it's not very clear what to do? Do I need to edit the build script in the package.json:

https://github.com/symfony/ux/blob/2.x/ux.symfony.com/assets/react/build/package.json

So that it points to the correct folders (input and output), then commit the compiled JS version of the files in my repository?

Thanks.

[kurim]

@lukepass
I also run in the same issues.

If using ux-react with assetmapper works but it is not that easy but i got it work.

If you create a default symfony project:

• symfony new my_project_directory --version="7.3.x" --webapp
• composer require symfony/ux-react
• npm install -D @babel/preset-react --force

assets\react\build\controllers\
assets\react\src\controllers\

react.yaml

react:
    controllers_path: '%kernel.project_dir%/assets/react/build/controllers'

package.json

{
  "devDependencies": {
    "@babel/cli": "^7.28.0",
    "@babel/core": "^7.28.0",
    "@babel/preset-react": "^7.27.1"
    },
    "license": "MIT",
    "private": true,
    "scripts": {
        "build": "babel ./assets/react/src/ --out-dir ./assets/react/build/ --presets=@babel/preset-react --no-babelrc"
    }
}

Now run npm build

npm run build

> build
> babel ./assets/react/src/ --out-dir ./assets/react/build/ --presets=@babel/preset-react --no-babelrc

Successfully compiled 1 file with Babel (144ms).

Adding the example as written down works like this:

At this point the documentation should be improved and more clear.

[Kocal]

Up for a PR ? :)