Symfony 4 + ReactJS无法正常工作

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

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

通常我遵循以下教程
https:// www.thinktocode.com/2018/06/21/symfony-4-and-reactjs/

https://symfony.com/doc/current/setup.html </ 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:// github.com/bahadirarslan/Symfony4ReactProblem </ p>

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

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

</ div>

展开原文

原文

I am trying to add google map search capability for my project and i found a very nice react code for this (https://github.com/ubilabs/react-geosuggest) 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 https://www.thinktocode.com/2018/06/21/symfony-4-and-reactjs/ and
https://symfony.com/doc/current/setup.html

But when i ran the example i got the following result

<!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>

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: https://github.com/bahadirarslan/Symfony4ReactProblem

UPDATE I also tried steps described here https://artemzhuravlev.com/blog/symfony-reactjs-using-encore/ 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 https://www.fahidjavid.com/fix-error-eacces-permission-denied-mkdir/

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

2个回答



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

  //将需要额外的脚本标记用于运行时。
//但是,您可能想要这个,除非您正在构建单页应用程序
.enableSingleRuntimeChunk()
</ 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 (https://github.com/Lyrkan) 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
.enableSingleRuntimeChunk()

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),

or

  • Manually change npm’s default directory

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

douning5041
douning5041 我尝试了这些说明,但无法帮助我。 所以我使用sudo和allow-root属性,可以运行npm install而不会出现任何错误。
一年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问