ReactJS нарушает код после импорта в проект Symfony - PullRequest
Новая
       8

ReactJS нарушает код после импорта в проект Symfony

0 голосов
/ 17 июня 2020

Я пытаюсь интегрировать ReactJS в свой проект Symfony 5, но сразу после его импорта код ломается.

Я выполнил указанные шаги на Symfony документация и Symfony Casts series :

  1. Установите Webpack Encore в проект Symfony.
  2. Установите зависимости разработчика react и react-dom.
  3. Создайте файл типа app_react.js in assets/js/, а затем добавьте его в качестве новой записи в webpack.config.js с помощью .addEntry('app_react', './assets/js/app_react.js').
  4. Ссылка app_react.js в base.html.twig с <script src="{{ asset('build/app_react.js') }}"></script>
  5. Включить пресеты React в Webpack Config: .enableReactPreset()
  6. Создайте элемент 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();

Итак, что я здесь делаю не так?

1 Ответ

1 голос
/ 17 июня 2020

Я думаю, ваша проблема может быть в шаге 4. Вместо использования 

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

, вероятно, должно быть: 

{{ encore_entry_script_tags('app_react') }}

Webpack на бис будет искать manifest.json, чтобы выяснить какие файлы включить. Вероятно, это не просто файл app_react.js.

...