webpackJsonp configuration (still) missing to allow multiple react app on single site

Describe the bug

As already described in other tickets ( https://github.com/facebook/create-react-app/issues/6631 ) CRA does not support changing the webpack config parameter output.webpackJsonp ( https://webpack.js.org/configuration/output/#outputjsonpfunction ). This makes CRA generated apps not being able to coexist on a single page. Both apps will try to set window.webpackJsonp and thus override the webpack chunk registry.

Steps to reproduce

1. Create two CRA apps and build them. They have to have chunks
2. Deploy both apps on a single index.html
3. Open the index.html. Only one app will show up

Expected behavior

The parameter does not have to be configurable at all. It would be enough to generate a unique string at build time for the webpack config. A build hash could do the trick. Alternatively, a configuration of the webpack output.webpackjsonp config to allow multiple CRA apps on a single page would solve the issue. Consider a widget approach where each CRA App will be a widget on a portal.

Actual behavior

No chance to reconfigure the property thus no way to make multiple CRA apps work. Each CRA App will use the webpack default value and thus break on coexistance. The other ticket ( https://github.com/facebook/create-react-app/issues/6631 ) suggests a “search and replace” npm package solution. That works, but feels absolutely wrong. You simply do not search-and-replace an compiled code.

Best, Jan

[JanThiel]

@zurcacielos Thank you for your reply 😃 Yes, this would indeed be kind of a “solution” to get it done. Although those CRA config layers tend to deprecate quite often or are run over by CRA changes. So they add complexity and and error-proneness to our projects. Saw this happening with a few of the “old” solutions to “configure” CRA which make me try to avoid them for our (longer living) enterprise projects.

So for “optional” config stuff I would agree that using a CRA config layer would be sufficient. But in this case, it is quite hard to explain someone, why 2 CRA apps would not be able to run on a single page. And it could and should be solved transparently by CRA with no one having to figure this out by themselves, and then even being required to add another package on top auf CRA to fix the webpack config.

Maybe this is a webpack design flaw after all. But using CRA should not make your life harder as far as I understand. Maybe CRA even does not want to support multiple react apps on a single page. This would be also a fair decission. But then it should be clearly documented.

I believe it’s clear, that I would vote for fixing this instead of adding docs stating “does not work out of the box”, but this is something the CRA project should decide.

Best, Jan

[kirill-konshin]

@JanThiel at the end of the README it says that if you need more customization you have alternatives. It seems very outdated. Did you try CRACO? https://github.com/gsoft-inc/craco

Thanks a lot for your suggestion, I’ve fixed the issue with webpackJsonp this way:

// craco.config.js
module.exports = {
    webpack: {
        configure: (webpackConfig, {env, paths}) => {
            webpackConfig.output.jsonpFunction = 'webpackJsonpDemoReact'; //THIS IS NEEDED TO DISTINGUISH FROM OTHER RUNNING WEBPACKS
            return webpackConfig;
        },
    },
};