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:
_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}