On this page

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. At this time, there is no indication that this react-scripts issue will be fixed, so we are providing the following workaround to enable you 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}