2019-03-16 12:14
浏览 99

Symfony 4 + ReactJS无法正常工作

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

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • dongzhang1839
    dongzhang1839 2019-03-19 14:42

    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.

    点赞 评论
  • doushu9253
    doushu9253 2019-03-18 20:44

    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 :

    点赞 评论