Webpack-encore: Symfony 4 Webpack Encore + ReactJs Not Working Without Any Error

Created on 19 Mar 2019 · 6Comments · Source: symfony/webpack-encore

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

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/

Source

bahadirarslan

Most helpful comment

Hi there,

Install webpack to symfony with composer
Install react with yarn
Config your webpack.config.js
Create your div element <div id="root"></div in your twig page
Make your jsx file for React - version 16 if your welcome FunctionComponent -
In your tiwg page, just add this 2 followings :
{% block stylesheets %}{{ encore_entry_link_tags('app') }}{% endblock %}
{% block javascripts %}{{ encore_entry_script_tags('app') }}{% endblock %}
Run yarn encore to compile
Run server symfony server:start
Enjoy x)

And the most important : RTFN (notice)
-> https://symfony.com/doc/current/frontend/encore/simple-example.html#configuring-encore-webpack

tlenoir on 26 Apr 2020

👍3 ❤2

All 6 comments

Hi @bahadirarslan,

Having to use sudo to install local packages seems weird to me... you probably should look at the access rights on the node_modules directory instead.

That being said, your problem comes from the fact that you're using Encore.enableSingleRuntimeChunk():

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

As noted in the comment above it, when you're calling that method you also need to add an extra <script> tag to your page that loads a runtime.js file also generated when calling Encore.

Lyrkan on 19 Mar 2019

Hi @Lyrkan ,

I don't know how can i thank you because your suggestion helped me to solve my problem.
Adding only runtime.js didn't help so i also added vendors~app.js to my html and voila!

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

I stuck at this problem very long time and i solved it by your helps. Thank you so much.

That being said, your problem comes from the fact that you're using Encore.enableSingleRuntimeChunk():
// will require an extra script tag for runtime.
// but, you probably want this, unless you're building a single-page app
.enableSingleRuntimeChunk()
As noted in the comment above it, when you're calling that method you also need to add an extra <script> tag to your page that loads a runtime.js file also generated when calling Encore.

bahadirarslan on 19 Mar 2019

@bahadirarslan the official documentation suggests using WebpackEncoreBundle, which handles the list of files automatically.

stof on 19 Mar 2019

@bahadirarslan the official documentation suggests using WebpackEncoreBundle, which handles the list of files automatically.

Probably i missed it, sorry. Anyway, i solved by adding these files.
I can take a good sleep now :)

bahadirarslan on 19 Mar 2019

Well, if you also needed to add a vendors~app.js, it probably means that you enabled the feature allowing splitting entrypoints. In such case, I strongly suggest you to use the WebpackEncoreBundle, as the list of files you need might change over time (based on how webpack splits the bundle)

stof on 19 Mar 2019

Hi there,