[Bug]: charts-react SSR render fails starting with 1.13.10 about carbon-charts

[nstuyvesant]

Hi @David-Yuen - thanks for this detail. Let's figure out how to get you working with 1.16.9 (and beyond).

The way I'm reading the most recent error is that you're requiring node_modules/@carbon/charts-react/dist/index.js and getting a message that it's an ES module and not UMD. But if we look at that file, we can visually see it's UMD because the file starts out with an IIFE.

It's being treated as an ES module because @carbon/charts-react package.json's type is module. This treats .js files as ES modules even though that's not correct where the dist folder is concerned.

Can you try a quick experiment?

1. In your node_modules/@carbon/charts-react/package.json, remove line 5 ("type": "module") and save.
2. See if the error still occurs.

Also, can you share what version of webpack you are using as well as your webpack config?

Separate question, are you able to use import instead of require?

[nstuyvesant]

@David-Yuen - we changed the exports for the UMD to use CJS in 1.16.10. Can you please check that and see if it solves your issue?

[David-Yuen]

@nstuyvesant I just tested 1.16.10 and it looks like the issue is resolved now, thanks.

I was going to try your quick experiment but you guys already fixed and delivered the 1.16.10, and that's working, so i think i dont need to test this now..

and answering the other questions:

We are using "webpack": "5.92.0", our webpack config is a bit complex, if you send me a slack message i can share it with you. We have one webpack config that builds client code in both node and web versions. We generally followed DAP's teams patterns.

and we generally use import from all our reactjs files.. but after building, the files are compiled differently and not sure how it is actually executed.. We are using the @loadable/component and @loadable/server libraries for code splitting, so we have built routes to each of our SPAs. Our webpack config will build each of our SPAs for both node and web.. I just generally know the node and web compiled codes are quite different.

[nstuyvesant]

Hi @David-Yuen - I am not inside of IBM so not on Slack but glad the update solved your issue.

Something that I have seen among Webpack users is inadvertent use of a cjs-loader. Normally, this is to convert ES modules to CJS. But if you wrote everything using import, you may not need it.

For sure, your generated bundles are CJS. You could look into whether that's really required. The benefit for going pure ESM is better tree-shaking. Of course, you are doing SSR so you would need to be using a recent version of node.js that supports ESM.

In any case, glad this blocker has been overcome. All the best.