Symfony 4 + ReactJS Not Working Without Any Error

Question

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/

Make sure you have added ".addEntry('js/app', ['babel-polyfill', './assets/js/app.js'])" in your webpack config file. — Jason, Mar 17 '19 at 05:51
As you can see in webpack.config.js file it is already added like .addEntry('app', ["@babel/polyfill",'./assets/js/app.js']) — bahadir arslan, Mar 18 '19 at 19:32

score 0 · Accepted Answer · answered Mar 19 '19 at 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.

I don’t think Symfony’s documentation role is to teach anyone how to correctly use Webpack and its artifacts. The `enableSingleRuntimeChunk` is described well enough though. — Mike Doe, Oct 13 '19 at 15:40

score -1 · Answer 2 · answered Mar 18 '19 at 20:44

-1

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

answered Mar 18 '19 at 20:44

matwr

1,548
1
13
23

I tried these instructions but couldn't help me. So i am using with sudo and allow-root attributes and can run the npm install without any error. – bahadir arslan Mar 19 '19 at 04:53

score -1 · Answer 3 · answered Oct 13 '19 at 15:31

-1

The same problem for me I added the line the twig header

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

and it works

answered Oct 13 '19 at 15:31

Mouneem Essabbar

94
1
3

Symfony 4 + ReactJS Not Working Without Any Error

3 Answers3