React SwaggerUI component broken after upgrading React / Node

[bodom0015]

Previous version of Node or React used to include Buffer as a polyfill. Newer version requires this polyfill to be manually added using webpack. Because we used Create-React-App, this is not easy without doing one of the following options:

• Eject our webpack config to customize it (this is a one-way operation)
• Use some third-party solution to customize CRA and add the missing webpack plugin

When loading `http://localhost:3000/swagger:

ep-extend.js:31 Uncaught ReferenceError: Buffer is not defined
    at isSpecificValue (deep-extend.js:31:1)
    at deep-extend.js:120:1
    at Array.forEach (<anonymous>)
    at deep-extend.js:98:1
    at Array.forEach (<anonymous>)
    at module.exports (deep-extend.js:93:1)
    at $r (swagger-ui.js:25876:1)
    at SwaggerUI.componentDidMount (index.js:46:1)
    at commitLayoutEffectOnFiber (react-dom.development.js:20174:1)
    at commitLayoutMountEffects_complete (react-dom.development.js:21341:1)
isSpecificValue @ deep-extend.js:31
(anonymous) @ deep-extend.js:120
(anonymous) @ deep-extend.js:98
module.exports @ deep-extend.js:93
$r @ swagger-ui.js:25876
componentDidMount @ index.js:46
commitLayoutEffectOnFiber @ react-dom.development.js:20174
commitLayoutMountEffects_complete @ react-dom.development.js:21341
commitLayoutEffects_begin @ react-dom.development.js:21330
commitLayoutEffects @ react-dom.development.js:21276
commitRootImpl @ react-dom.development.js:23186
commitRoot @ react-dom.development.js:23066
finishConcurrentRender @ react-dom.development.js:22463
performConcurrentWorkOnRoot @ react-dom.development.js:22314
workLoop @ scheduler.development.js:227
flushWork @ scheduler.development.js:205
performWorkUntilDeadline @ scheduler.development.js:442
react-dom.development.js:16245 The above error occurred in the <SwaggerUI> component:

    at SwaggerUI (http://localhost:3000/static/js/bundle.js:178161:94)
    at SwaggerUiPage (http://localhost:3000/static/js/bundle.js:5658:84)
    at RenderedRoute (http://localhost:3000/static/js/bundle.js:134596:5)
    at Routes (http://localhost:3000/static/js/bundle.js:135061:5)
    at LocationProvider (http://localhost:3000/static/js/bundle.js:208577:20)
    at QueryParamProvider (http://localhost:3000/static/js/bundle.js:208727:21)
    at Router (http://localhost:3000/static/js/bundle.js:134999:15)
    at BrowserRouter (http://localhost:3000/static/js/bundle.js:133203:5)
    at div
    at O (http://localhost:3000/static/js/bundle.js:177900:8)
    at http://localhost:3000/static/js/bundle.js:98143:5
    at Fe (http://localhost:3000/static/js/bundle.js:177820:60)
    at DarkThemeProvider (http://localhost:3000/static/js/bundle.js:880:5)
    at App (http://localhost:3000/static/js/bundle.js:96:76)
    at Provider (http://localhost:3000/static/js/bundle.js:130976:5)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:16245
update.callback @ react-dom.development.js:16275
callCallback @ react-dom.development.js:12174
commitUpdateQueue @ react-dom.development.js:12192
commitLayoutEffectOnFiber @ react-dom.development.js:20248
commitLayoutMountEffects_complete @ react-dom.development.js:21341
commitLayoutEffects_begin @ react-dom.development.js:21330
commitLayoutEffects @ react-dom.development.js:21276
commitRootImpl @ react-dom.development.js:23186
commitRoot @ react-dom.development.js:23066
performSyncWorkOnRoot @ react-dom.development.js:22575
flushSyncCallbacks @ react-dom.development.js:10573
commitRootImpl @ react-dom.development.js:23303
commitRoot @ react-dom.development.js:23066
finishConcurrentRender @ react-dom.development.js:22463
performConcurrentWorkOnRoot @ react-dom.development.js:22314
workLoop @ scheduler.development.js:227
flushWork @ scheduler.development.js:205
performWorkUntilDeadline @ scheduler.development.js:442
deep-extend.js:31 Uncaught ReferenceError: Buffer is not defined
    at isSpecificValue (deep-extend.js:31:1)
    at deep-extend.js:120:1
    at Array.forEach (<anonymous>)
    at deep-extend.js:98:1
    at Array.forEach (<anonymous>)
    at module.exports (deep-extend.js:93:1)
    at $r (swagger-ui.js:25876:1)
    at SwaggerUI.componentDidMount (index.js:46:1)
    at commitLayoutEffectOnFiber (react-dom.development.js:20174:1)
    at commitLayoutMountEffects_complete (react-dom.development.js:21341:1)
i

[bodom0015]

Temporary fix for this seems to be downgrade react-scripts from 5.0.1 to 4.0.3: https://stackoverflow.com/a/70408952

Long term, we'll need to look into one of the above solutions (probably by ejecting webpack config)