ReactJS 在 Symfony 项目中导入后会破坏代码

我正在尝试将 ReactJS 集成到我的 Symfony 5 项目中，但在导入它之后，它似乎破坏了代码。

我遵循了Symfony 文档和Symfony Casts 系列中提到的步骤：

1. 在 Symfony 项目上安装 Webpack Encore。
2. 安装开发依赖项react和react-dom.
3. 创建一个类似app_react.jsin的文件assets/js/，然后将其作为新条目添加到webpack.config.jswith .addEntry('app_react', './assets/js/app_react.js')。
4. 参考app_react.js在base.html.twig与<script src="{{ asset('build/app_react.js') }}"></script>
5. 在 Webpack Config 上启用 React 预设： .enableReactPreset()
6. 在 (ie) 中创建一个 HTML 元素templates/user/base.html.twig：<div id="app-react"></div>
7. 编译资产yarn encore dev --watch（一切都编译）。
8. 进口React的app_react.js

在此之后，如果我只调试一个简单console.log('Hello world')的打印，但如果我导入之后React没有执行代码。我已经尝试过使用 React 打印一些代码的常用方法：

import React from 'react';
import ReactDOM from 'react-dom';

console.log('This is not being printed');

const SomeText = () => (
    <h2>Some Text</h2>
);

ReactDOM.render(<SomeText />, document.getElementById('react-app'));

这是浏览器源app_react.js文件显示的内容：

以防万一，这是我的webpack.config.js文件：

var Encore = require('@symfony/webpack-encore');

if (!Encore.isRuntimeEnvironmentConfigured()) {
    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}

Encore
    .setOutputPath('public/build/')
    .setPublicPath('/build')
    .copyFiles({
        from: './assets/image'
    })
    .addEntry('app', './assets/js/app.js')
    .addEntry('app_react', './assets/js/app_react.js') // Step 3
    .autoProvidejQuery()
    .splitEntryChunks()
    .enableSingleRuntimeChunk()
    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    .enableVersioning(Encore.isProduction())
    .configureBabelPresetEnv((config) => {
        config.useBuiltIns = 'usage';
        config.corejs = 3;
    })
    .enableSassLoader()
    .enableReactPreset() // Step 5
;

module.exports = Encore.getWebpackConfig();

那么，我在这里做错了什么？