Symfony ux-react: npm run build create 3 errors

[Fugann]

I created my project in Symfony 7.0.5 and I would like to add React-UX to my project. I followed this YouTube tutorial: https://youtu.be/jPi9HcP7fU8?si=iG5PjIC43wJBz2an (french video). When I run npm run build, I get these 3 errors:
`PS C:\wamp64\www\freelance-management-system> npm run build

build
encore production --progress

Running webpack ...

99% done plugins FriendlyErrorsWebpackPlugin ERROR Failed to compile with 3 errors
13:52:18

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.

Entrypoint app = runtime.869f9e00.js app.92a5ef62.css app.67bc40d7.js
webpack compiled with 3 errors`

Here is my app.js:
`import { registerReactControllerComponents } from '@symfony/ux-react';
import './bootstrap.js';
/*

• Welcome to your app's main JavaScript file!
• This file will be included onto the page via the importmap() Twig function,
• which should already be in your base.html.twig.
  */
  import './styles/app.css';

console.log('This log comes from assets/app.js - welcome to AssetMapper! 🎉');

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

Here is my bootstrap.js:
`import { startStimulusApp } from '@symfony/stimulus-bundle';

const app = startStimulusApp();
// register any custom, 3rd party controllers here
// app.register('some_controller_name', SomeImportedController);`

Here is my React controller:
`import React from 'react';

export default function (props) {
return

Hello {props.fullName}

;
}`

Here is my webpack.config.js:
`const Encore = require('@symfony/webpack-encore');

// Manually configure the runtime environment if not already configured yet by the "encore" command.
// It's useful when you use tools that rely on webpack.config.js file.
if (!Encore.isRuntimeEnvironmentConfigured()) {
Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}

Encore
// directory where compiled assets will be stored
.setOutputPath('public/build/')
// public path used by the web server to access the output path
.setPublicPath('/build')
// only needed for CDN's or subdirectory deploy
//.setManifestKeyPrefix('build/')

/*
 * ENTRY CONFIG
 *
 * Each entry will result in one JavaScript file (e.g. app.js)
 * and one CSS file (e.g. app.css) if your JavaScript imports CSS.
 */
.addEntry('app', './assets/app.js')

// When enabled, Webpack "splits" your files into smaller pieces for greater optimization.
.splitEntryChunks()

.enableReactPreset()

// will require an extra script tag for runtime.js
// but, you probably want this, unless you're building a single-page app
.enableSingleRuntimeChunk()

/*
 * FEATURE CONFIG
 *
 * Enable & configure other features below. For a full
 * list of features, see:
 * https://symfony.com/doc/current/frontend.html#adding-more-features
 */
.cleanupOutputBeforeBuild()
.enableBuildNotifications()
.enableSourceMaps(!Encore.isProduction())
// enables hashed filenames (e.g. app.abc123.css)
.enableVersioning(Encore.isProduction())

// configure Babel
// .configureBabel((config) => {
//     config.plugins.push('@babel/a-babel-plugin');
// })

// enables and configure @babel/preset-env polyfills
.configureBabelPresetEnv((config) => {
    config.useBuiltIns = 'usage';
    config.corejs = '3.23';
})

// enables Sass/SCSS support
//.enableSassLoader()

// uncomment if you use TypeScript
//.enableTypeScriptLoader()

// uncomment if you use React
.enableReactPreset()

// uncomment to get integrity="..." attributes on your script & link tags
// requires WebpackEncoreBundle 1.4 or higher
//.enableIntegrityHashes(Encore.isProduction())

// uncomment if you're having problems with a jQuery plugin
//.autoProvidejQuery()
.enablePostCssLoader()

;

module.exports = Encore.getWebpackConfig();`

Here is my package.json:
{ "devDependencies": { "@babel/core": "^7.17.0", "@babel/preset-env": "^7.16.0", "@babel/preset-react": "^7.0.0", "@symfony/webpack-encore": "^4.0.0", "autoprefixer": "^10.4.18", "core-js": "^3.23.0", "postcss": "^8.4.35", "postcss-loader": "^7.3.4", "regenerator-runtime": "^0.13.9", "tailwindcss": "^3.4.1", "webpack": "^5.74.0", "webpack-cli": "^4.10.0", "webpack-notifier": "^1.15.0" }, "license": "UNLICENSED", "private": true, "scripts": { "dev-server": "encore dev-server", "dev": "encore dev", "watch": "encore dev --watch", "build": "encore production --progress" } }

Here is my composer.json:
{ "type": "project", "license": "proprietary", "minimum-stability": "stable", "prefer-stable": true, "require": { "php": ">=8.2", "ext-ctype": "*", "ext-iconv": "*", "doctrine/dbal": "^3", "doctrine/doctrine-bundle": "^2.11", "doctrine/doctrine-migrations-bundle": "^3.3", "doctrine/orm": "^3.1", "phpdocumentor/reflection-docblock": "^5.3", "phpstan/phpdoc-parser": "^1.26", "symfony/asset": "7.0.*", "symfony/asset-mapper": "7.0.*", "symfony/console": "7.0.*", "symfony/doctrine-messenger": "7.0.*", "symfony/dotenv": "7.0.*", "symfony/expression-language": "7.0.*", "symfony/flex": "^2", "symfony/form": "7.0.*", "symfony/framework-bundle": "7.0.*", "symfony/http-client": "7.0.*", "symfony/intl": "7.0.*", "symfony/mailer": "7.0.*", "symfony/mime": "7.0.*", "symfony/monolog-bundle": "^3.0", "symfony/notifier": "7.0.*", "symfony/process": "7.0.*", "symfony/property-access": "7.0.*", "symfony/property-info": "7.0.*", "symfony/runtime": "7.0.*", "symfony/security-bundle": "7.0.*", "symfony/serializer": "7.0.*", "symfony/stimulus-bundle": "^2.16", "symfony/string": "7.0.*", "symfony/translation": "7.0.*", "symfony/twig-bundle": "7.0.*", "symfony/ux-react": "^2.16", "symfony/ux-turbo": "^2.16", "symfony/validator": "7.0.*", "symfony/web-link": "7.0.*", "symfony/webpack-encore-bundle": "^2.1", "symfony/yaml": "7.0.*", "twig/extra-bundle": "^2.12|^3.0", "twig/twig": "^2.12|^3.0" }, "config": { "allow-plugins": { "php-http/discovery": true, "symfony/flex": true, "symfony/runtime": true }, "sort-packages": true }, "autoload": { "psr-4": { "App\\": "src/" } }, "autoload-dev": { "psr-4": { "App\\Tests\\": "tests/" } }, "replace": { "symfony/polyfill-ctype": "*", "symfony/polyfill-iconv": "*", "symfony/polyfill-php72": "*", "symfony/polyfill-php73": "*", "symfony/polyfill-php74": "*", "symfony/polyfill-php80": "*", "symfony/polyfill-php81": "*", "symfony/polyfill-php82": "*" }, "scripts": { "auto-scripts": { "cache:clear": "symfony-cmd", "assets:install %PUBLIC_DIR%": "symfony-cmd", "importmap:install": "symfony-cmd" }, "post-install-cmd": [ "@auto-scripts" ], "post-update-cmd": [ "@auto-scripts" ] }, "conflict": { "symfony/symfony": "*" }, "extra": { "symfony": { "allow-contrib": false, "require": "7.0.*" } }, "require-dev": { "phpunit/phpunit": "^9.5", "symfony/browser-kit": "7.0.*", "symfony/css-selector": "7.0.*", "symfony/debug-bundle": "7.0.*", "symfony/maker-bundle": "^1.0", "symfony/phpunit-bridge": "^7.0", "symfony/stopwatch": "7.0.*", "symfony/web-profiler-bundle": "7.0.*" } }

And here is my file tree: https://i.stack.imgur.com/Bqg8e.png