Symfony 4 + ReactJS не работает без ошибок - PullRequest
1 голос
/ 16 марта 2019

Я пытаюсь добавить возможность поиска по карте Google для своего проекта, и я нашел очень хороший код реакции для этого (https://github.com/ubilabs/react-geosuggest), но я не смог добавить его в админ-панель на основе Symfony 4.

Чтобы понять, что не так, я создал новый проект Symfony 4 и просто добавил один контроллер и шаблон ветки.

Обычно я следовал следующим урокам https://www.thinktocode.com/2018/06/21/symfony-4-and-reactjs/ и
https://symfony.com/doc/current/setup.html

Но когда я запустил пример, я получил следующий результат

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Welcome!</title>
            </head>
    <body>
            <div id="root"></div>
            <script type="text/javascript" src="/build/app.js"></script>
    </body>
</html>

Как видите, это тот же код, что и для index.html.twig; нет изменений. Реакт не изменил ничего, вместо того чтобы я ожидал.

Этот учебник не тот, который я только что попробовал. Также я пробовал, учебник React Getting Started и другие примеры Symfony 4 + React, но результат всегда был один и тот же.

Вы можете получить доступ к исходным кодам здесь: https://github.com/bahadirarslan/Symfony4ReactProblem

UPDATE Я также попробовал описанные здесь шаги https://artemzhuravlev.com/blog/symfony-reactjs-using-encore/, но не смог сделать это.

Единственное, что я хочу отметить, когда я пытаюсь запустить npm install, я всегда получаю EACCES: permission denied ошибку, поэтому я запускаю npm install с sudo и --allow-roo t атрибутами, как описано здесь https://www.fahidjavid.com/fix-error-eacces-permission-denied-mkdir/

Ответы [ 2 ]

1 голос
/ 19 марта 2019

Наконец-то я нашел решение с помощью Vincent Le Biannic (https://github.com/Lyrkan) на github. Он обратил мое внимание на строки ниже на webpack.config.js

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

Этот конфиг заставляет вызывать runtime.js (который был сгенерирован на бис) в html-файле. Но добавление только runtime.js не помогло, поэтому я также добавил vendors-app.js и вуаля!

Интересно, что ни оригинальная документация Symfony, ни какие-либо руководства по этой теме не содержат ни единой строки об этой ситуации.

0 голосов
/ 18 марта 2019

Если вы видите ошибку EACCES при попытке установить пакет глобально, вы можете:

  • Переустановить npm с помощью менеджера версий узла (рекомендуется),

или

  • Вручную изменить каталог по умолчанию для npm

Источник : https://docs.npmjs.com/resolving-eacces-permissions-errors-when-installing-packages-globally

...