Known issue: Self-hosted Flex 2.7.0 and later requires specific react-scripts version

If you use self-hosted Flex and your custom application uses react-scripts v5, you must apply a workaround to use Flex UI 2.7.0 or later due to a react-scripts issue. Without the workaround, Flex will fail to initialize.

This happens because react-scripts v5 includes a known issue that prevents CommonJS modules from loading correctly and defines them incorrectly in the final bundle. Because this react-scripts issue remains unresolved, use the following workaround to upgrade your Flex version.

Workaround

You must modify the webpack configuration that is included with react-scripts v5 as shown in the example below. We recommend using craco, but you can also use other packages that allow you to tweak the react-scripts configuration, such as react-app-rewired.

This example shows craco.config.js extends the react-scripts webpack configuration:

1module.exports = {
2    webpack: {
3        configure: (config) => {
4            // ...
5            const fileLoaderRule = getFileLoaderRule(config.module.rules);
6            if(!fileLoaderRule) {
7                throw new Error("File loader not found");
8            }
9            fileLoaderRule.exclude.push(/\.cjs$/);
10            // ...
11	    return config;
12        }
13    }
14};
15
16function getFileLoaderRule(rules) {
17    for(const rule of rules) {
18        if("oneOf" in rule) {
19            const found = getFileLoaderRule(rule.oneOf);
20            if(found) {
21                return found;
22            }
23        } else if(rule.test === undefined && rule.type === 'asset/resource') {
24            return rule;
25        }
26    }
27}