Symfony 4 + ReactJS无法正常工作

我正在尝试为我的项目添加谷歌地图搜索功能,我发现了一个非常好的反应代码(< a href =“”rel =“nofollow noreferrer”> )但我无法添加此项 到基于symfony 4的管理面板。</ p>

要了解有什么问题,我创建了一个新的symfony 4项目,只添加了一个控制器和一个树枝模板。</ p>

https:// </ p>

但是当我运行该示例时,我得到以下结果< / p>

 &lt;!DOCTYPE html&gt; 
&lt; html&gt;
&lt; head&gt;
&lt; meta charset =“UTF-8”&gt;
&lt; title&gt;欢迎!&lt; / title&gt;
&lt; / head&gt;
&lt; body&gt;
&lt; div id =“root”&gt;&lt; / div&gt;
&lt; script type =“text / javascript“src =”/ build / app.js“&gt;&lt; / script&gt;
&lt; / body&gt;
&lt; / html&gt;
</ code> </ pre>

如您所见,它与index.html.twig的代码相同; 没有变化。 React没有改变任何东西,而不是我预期的。</ p>

这个教程不是我刚试过的那个。我也试过,React入门教程和其他Symfony 4 + React示例但结果 总是一样的。 </ p>

https:// </ p>

更新</ strong>
我也尝试了此处描述的步骤 但无法成功。</ p >

我唯一要提的是,当我尝试运行 npm install </ code>时,我总是得到 EACCES:permission denied </ code>错误,所以我正在运行< 代码> npm install </ code>,带 sudo </ code>和 - allow-roo </ code> t属性,如此处所述 </ p>

</ div>



I am trying to add google map search capability for my project and i found a very nice react code for this ( but i couldn't add this to symfony 4 based admin panel.

To understand what is wrong i created a new symfony 4 project and just added one controller and a twig template.

Generally i followed the following tutorials and

But when i ran the example i got the following result

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

As you can see, it is just the same code with the index.html.twig; there is no change. React didn't change anything instead of i expected.

This tutorial is not the one i just tried.Also I tried, React Getting Started tutorial and other Symfony 4 + React examples but the result was always same.

You can access the source codes from here:

UPDATE I also tried steps described here but couldn't make it.

The only thing i want to mention, when i try to run npm install i always get EACCES: permission denied error so i am running npm install with sudo and --allow-root attributes like described here

dphj737575 正如您在webpack.config.js文件中看到的那样,它已经添加为.addEntry('app',[“@babel/polyfill”,'。/assets/js/app.js'])
一年多之前 回复
dqluw20882 确保在webpack配置文件中添加了“.addEntry('js/app',['babel-polyfill','。/assets/js/app.js'])”。
一年多之前 回复


最后我找到了帮助Vincent Le Biannic的解决方案(
他把我的注意力集中在 webpack.config.js </ code> </ p>
\下面的行 n

</ code > </ pre>

此配置需要在html文件中调用 runtime.js </ code>(由encore生成)。
但是只添加 runtime.js < / code>没有帮助所以我还添加了 vendors-app.js </ code>和瞧!</ p>

有趣的是,symfony的原始文档和任何有关此主题的教程都没有 t包含有关此情况的任何一行。</ p>
</ div>



Finally i found the solution with helps Vincent Le Biannic ( at github. He took my attention to lines below at webpack.config.js

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

This config make necessary to call runtime.js (which was generated by encore) in html file. But adding only runtime.js didn't help so i also added vendors-app.js and voila!

Interestingly neither symfony's original documentation nor any tutorial about this subject don't contain any single line about this situation.

如果在尝试全局安装软件包时看到 EACCES错误</ strong>,则可以:</ p>



If you see an EACCES error when you try to install a package globally, you can either:

  • Reinstall npm with a node version manager (recommended),


  • Manually change npm’s default directory

Source :

douning5041 我尝试了这些说明,但无法帮助我。 所以我使用sudo和allow-root属性,可以运行npm install而不会出现任何错误。
一年多之前 回复
Csdn user default icon