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

Question

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

我已按照Symfony documentation 和Symfony Casts series 上提到的步骤进行操作：

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

在这一点之后，如果我只调试一个简单的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();

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

Answer 1

我认为您的问题可能出在第 4 步。而不是使用

<script src="{{ asset('build/app_react.js') }}"></script>

应该是：

{{ encore_entry_script_tags('app_react') }}

Webpack encore 将查找 manifest.json 以确定要包含的文件。可能不仅仅是app_react.js 文件。