Chart.js - Charts are no longer displayed

[bastien70]

Hey! Since the last version of Symfony and therefore the update of Symfony UX, it seems that there is a problem to display charts with Chart.js

I haven't touched anything on my previous code. But when I return a chart, it no longer appears :

<div id="reports_charts">
    <div class="chart-container chart">
        {{ render_chart(chartOne) }}
    </div>
    <div class="chart-container chart">
        {{ render_chart(chartTwo) }}
    </div>
</div>

I asked comrades, same problem for them

[tgalopin]

You may need to upgrade either Encore, stimulus-bridge or both. You should use Encore 1.0, stimulus-bridge 2.0 and the latest version of UX packages :) .

[bastien70]

The problem is that if we upgrade Webpack-Encore to a version greater than or equal to v1, we get bugs that have not yet been officially fixed in the manifest.json file. The choice is therefore complicated ...

Either I update webpack-encore and its dependencies and I can use chart.js properly, but in this case I will have a big manifest.json bug, preventing me from doing some things

Either I leave webpack-still in version 0.32 but I will not be able to use chart.js from Symfony UX :'(

[Crayzo]

I got the same error ... the charts were displaying correctly on Symfony version 5.2.2, but since I updated to version 5.2.3 my charts are not showing anymore

[tgalopin]

Would you have an error to share here (in the development console of your browser for instance)? Also, could you share here what the generated HTML is for the charts?

[Crayzo]

Would you have an error to share here (in the development console of your browser for instance)? Also, could you share here what the generated HTML is for the charts?

Before update:

"devDependencies": {
    "@symfony/stimulus-bridge": "^1.1.0",
    "@symfony/webpack-encore": "^0.32.0"
    ...

I have no errors, JavaScript is not loaded when I go to my charts page.

But the html element is created:

After update:

If I upgrade webpack-encore to 1.0.4, stimulus-bridge to 2.0, and if I comment import '@symfony/autoimport';
in assets/bootstrap.js it work. But I have lots of dependency warnings:

And the compilation is extremely slow... and the names of my entry points are really strange:

vendors-node_modules_symfony_stimulus-bridge_dist_index_js-node_modules_bootstrap_dist_js_boo-395df3.css

 vendors-node_modules_symfony_stimulus-bridge_dist_index_js-node_modules_bootstrap_dist_js_boo-395df3.js

[tgalopin]

@weaverryan do you think there is a problem here?

[weaverryan]

The problem is that if we upgrade Webpack-Encore to a version greater than or equal to v1, we get bugs that have not yet been officially fixed in the manifest.json file. The choice is therefore complicated ...

Hey @bastien70!

What problems are you having? Is it this issue? symfony/webpack-encore#907

And hi @Crayzo!

But I have lots of dependency warnings

The first one is nothing to worry about, but unfortunate. One of our dependencies doesn't advertise that it works on Webpack 5... even though it does.

About the other ones, do you have postcss installed? It looks like some of your packages are telling you that you're supposed to add it to your package.json file. That shouldn't have anything to do with Encore. If it didn't happen before, it's possible an upgrade to those packages made a difference. But none of those packages are things that Encore uses - so I'm not sure :).

And the compilation is extremely slow

Just in case, make sure you're on at least version 1.0.3 - there was a performance regression on the "re"-build in watch and dev-server mode. Also, check out the new build cache - that might help - https://github.com/symfony/webpack-encore/blob/38f233dcb806e8aa4c8ddc5e80750f3419d403f8/index.js#L1008-L1037

and the names of my entry points are really strange

Those are ok :). I think Webpack 5 did that to make debugging easier. If you build for production, these all become things like 139.js and other random integer names.

If you have further questions or issues, please open them over on https://github.com/symfony/webpack-encore

Cheers!

[lordcysiek]

You may need to upgrade either Encore, stimulus-bridge or both. You should use Encore 1.0, stimulus-bridge 2.0 and the latest version of UX packages :) .

I started fresh symfony 5.3.3 project, followed instructions to install encore-webpack-bundle, symfony-ux and stimulus. It's broken.
Yarn throws node errors or deprecation warnings. Can't even make it works with 0.32 webpack and 1.1 bridge on 5.3.3 (no errors but no charts also).
On 5.2.2 everything works flawless and I'm afraid of doing composer update with my real application. I know its experimental feature, but i think we need more specific informations about supported yarn and node versions (is 1.22 yarn and 10.x node still supported anyway?).

UPDATE:
Maybe someone will spot similar problem, so i leave it here:

yarn install v1.22.10 [1/4] Resolving packages... [2/4] Fetching packages... error @symfony/webpack-encore@1.0.4: The engine "node" is incompatible with this module. Expected version "^10.22.1 || ^12.0.0 || >=14.0.0". Got "10.19.0" error Found incompatible module.
yarn install --ignore-engines do the job.

I guess I need to update my Dockerfile with newer version... which is now stable btw:
RUN curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - \ && echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list RUN apt-get update && apt-get install -y yarn

[tgalopin]

Ah, your issue is linked to symfony/webpack-encore#912

It's being fixed, indeed!