Symfony 4 + ReactJS 无法正常工作

Question

我正在尝试为我的项目添加 google 地图搜索功能，我为此找到了一个非常好的反应代码 (https://github.com/ubilabs/react-geosuggest)，但我无法将其添加到基于 symfony 4 的管理员面板。

为了了解问题所在，我创建了一个新的 symfony 4 项目并添加了一个控制器和一个 twig 模板。

通常我遵循了以下教程 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 没有改变任何东西，而不是我预期的。

本教程不是我刚刚 tried.Also 我尝试过的教程，React 入门教程和其他 Symfony 4 + React 示例，但结果始终相同。

您可以从这里访问源代码： https://github.com/bahadirarslan/Symfony4ReactProblem

更新我也尝试了此处描述的步骤 https://artemzhuravlev.com/blog/symfony-reactjs-using-encore/ 但无法成功。

我唯一想提的是，当我尝试运行 npm install 时，我总是得到 EACCES: permission denied 错误，所以我运行ning npm install具有 sudo 和 --allow-root 属性，如此处所述 https://www.fahidjavid.com/fix-error-eacces-permission-denied-mkdir/

Answer 1

如果您在尝试全局安装软件包时看到 EACCES 错误，您可以：

使用节点版本管理器重新安装 npm（推荐），

或

来源 : https://docs.npmjs.com/resolving-eacces-permissions-errors-when-installing-packages-globally

Answer 2

最后我在 github 的 Vincent Le Biannic (https://github.com/Lyrkan) 帮助下找到了解决方案。他在 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()

此配置需要在 html 文件中调用 runtime.js（由 encore 生成）。但是仅添加 runtime.js 没有帮助，所以我还添加了 vendors-app.js 瞧！

有趣的是，无论是 symfony 的原始文档还是关于该主题的任何教程都不包含关于这种情况的任何一行。

Answer 3

和我一样的问题我添加了 twig header

这一行

<script type="text/javascript" src="{{ asset('build/vendor/app.js') }}"></script>

有效

Symfony 4 + ReactJS 无法正常工作

Symfony 4 + ReactJS Not Working Without Any Error

php

reactjs

webpack-encore

symfony4