"React is not defined" reported at running about browse HOT 9 CLOSED

In case this is a help to anyone else: I was running into the same problem as @frozenjackxp in the original post, and the solution (for me) turned out to be that I needed to use the UMD (Universal Module Definition) version of react and react-dom and not the CJS (CommonJS) version. The latter don't work in the browser unless they're transpiled first, and because they fail to load then react will be undefined.

I needed to download
https://cdnjs.cloudflare.com/ajax/libs/react/16.13.0/umd/react.production.min.js
and
https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.0/umd/react-dom.production.min.js
instead of
https://cdnjs.cloudflare.com/ajax/libs/react/16.13.0/cjs/react.production.min.js
and
https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.0/cjs/react-dom.production.min.js

from browse.

@frozenjackxp: Remove "config-overrides-path": "node_modules/react-app-rewire-micro-frontends" in package.json, then add config-overrides.js under ./ directory fix this issue.

#config-overrides.js
module.exports = function override(config, env) {
    //return config;
    config.optimization.runtimeChunk = false;
    config.optimization.splitChunks = {
        cacheGroups: {
            default: false,
        },
    };
    return config;
}

from browse.

@locngoxuan That does get this micro frontend working - however it causes it (the 'Browse' micro frontend) to use its own version of react and react-dom (as defined in package.json dependencies) rather than making use of the ones hosted by the 'Content' micro frontend. This is because it removes the config.externals section from the react-app-rewire-micro-frontends library (see https://github.com/camjackson/react-app-rewire-micro-frontends/blob/master/config-overrides.js)

The "Common content" section of the Micro Frontends article describes making use of a shared react and react-dom in each micro frontend rather than each one bundling their own. This should minimise each one's bundle size. It would be nice to get this micro frontend working while still making use of the common content.

from browse.

Hi everyone. As @FergusMcGlynn mentioned, the micro frontends are set up to externalise React from the compiled bundle, so that a single instance can be shared across all the different apps, reducing the number of bytes that users have to download. It's described here.

I can't say for sure but I suspect the issue is that you aren't running the content app alongside the rest of the applications, as the README for this repo describes. The content app provides common content such as images, styles, data, and shared dependencies like React.

I hope that helps.

from browse.

Hi @camjackson -- I ran into a similar issue and saw this thread. Does this mean that during development, we are using the minified production build of React? Is there a way to use the development build during development?

Also -- loved your article on https://martinfowler.com/.

from browse.

Hi @charlie-maloney, it's been ages since I looked at this code but I'm pretty sure the shared content server should be serving up the dev build of react during development, and then bundling up the production build for production. Are you seeing something that would suggest otherwise?

And thanks 🙂

from browse.

@FergusMcGlynn If you can tell where exactly you put those links for downloading React via CDN ? Is it in index.html under public folder ?

from browse.

@gvkhirwadkar It's a long time since I looked at this - but I don't think I embedded the links to react and react-dom in the application anywhere, not even in public/index.html of this repo. If you look at the content repo, it has a folder called content, and in there, there are downloaded versions of react and react-dom. It is these downloaded copies of react and react-dom that I needed to replace with UMD versions rather than CJS versions. I did that simply by downloading the UMD files into the content folder (overwriting the ones that were already there) using the links in my comment above.

Bear in mind that those versions of react and react-dom will be out of date by now.

from browse.

from browse.