[Symfony UX React] component not rendering

[kingjulien1]

I configured encore & added the React preset end enabled it, as well as initialized the stimulus bridge with correct entrypoints.

When I try to render a component with <div {{react_component('MyComponent')}}></div> the html renders an empty div like so:

<div data-controller="symfony--ux-react--react" data-symfony--ux-react--react-component-value="PackageSearch" data-symfony--ux-react--react-props-value="{&quot;packages&quot;:&quot;test&quot;}"></div>

Thanks for any help in advance

[tgalopin]

Hi!

It is actually normal: the rendering is done in JavaScript, the HTML output is empty. Does the behavior work in the browser?

[kingjulien1]

The code snippet i posted, I actually directly copied out of the browser's element window. Do I have to include something other than

		{% block javascripts %}
			{{ encore_entry_script_tags('app') }}
		{% endblock %}

in my base layout?

Edit: So it does actually render after reseting my browser cache in chrome. however, everytime i make a change to any react component i have to reset cache again. i don't think this is intended behaviour

[weaverryan]

Hmm, it sounds like your browser might be very eagerly holding onto your cached JavaScript. In webpack.config.js, change this line - https://github.com/symfony/recipes/blob/85dc7cd2f0049f9a86a6d020691ea217561f33e5/symfony/webpack-encore-bundle/1.10/webpack.config.js#L46 - simply to .enableVersioning(). That will enabled versioned filenames even in dev (no real downside to this) and should help if the problem is browser caching.

Cheers!

[JorisCodePeople]

I have a similar problem.

<div {{ react_component('FirstComponent') }}></div> in the template does get translated to <div data-controller="symfony--ux-react--react" data-symfony--ux-react--react-component-value="FirstComponent"></div> in the DOM, but my component is not rendering.

Component code (/controllers/FirstComponent.jsx):

import React, { Component } from "react";

console.debug('First Component loaded')

export default class FirstComponent extends Component {
    constructor() {
        super();
        console.debug('FirstComponent mounted')
    }

    render() {
        return (
            <div>Hello. Good day.</div>
        )
    }
}

I can see the debug statement in the console that is outside the component, but not the one in the constructor.

Could you give me a hand?

PS: this is my app.js file that is the Webpack entry:

import { registerReactControllerComponents } from '@symfony/ux-react';

registerReactControllerComponents(require.context('./controllers', true));
console.debug('React bundle loaded')

[JorisCodePeople]

I have solved my problem. It turns out I didn't install the encore recipe correctly, and therefore didn't include bootstrap.js in my app.js file. From there it was a matter of simply following the errors in the console.

[carsonbot]

Thank you for this issue. There has not been a lot of activity here for a while. Has this been resolved?

[carsonbot]

Just a quick reminder to make a comment on this. If I don't hear anything I'll close this.

[carsonbot]

Hey,

I didn't hear anything so I'm going to close it. Feel free to comment if this is still relevant, I can always reopen!