douyunjiaok300404
douyunjiaok300404
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 (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/

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

2条回答 默认 最新

  • dongzhang1839
    dongzhang1839 2019-03-19 14:42
    已采纳

    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.

    点赞 评论
  • 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),

    or

    • Manually change npm’s default directory

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

    点赞 评论

相关推荐