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.
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:
_27module.exports = {_27 webpack: {_27 configure: (config) => {_27 // ..._27 const fileLoaderRule = getFileLoaderRule(config.module.rules);_27 if(!fileLoaderRule) {_27 throw new Error("File loader not found");_27 }_27 fileLoaderRule.exclude.push(/\.cjs$/);_27 // ..._27 return config;_27 }_27 }_27};_27_27function getFileLoaderRule(rules) {_27 for(const rule of rules) {_27 if("oneOf" in rule) {_27 const found = getFileLoaderRule(rule.oneOf);_27 if(found) {_27 return found;_27 }_27 } else if(rule.test === undefined && rule.type === 'asset/resource') {_27 return rule;_27 }_27 }_27}