时间戳

首页 > 解决方案 > ReactJS 在 Symfony 项目中导入后会破坏代码

javascript - 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();

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

标签： javascriptphpreactjssymfonywebpack

解决方案

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

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

应该是：

{{ encore_entry_script_tags('app_react') }}

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

推荐阅读