swagger-ui-react: Build broken with react-scripts 5.0.0

[haavardw]

• OS: Linux
• Method of installation: yarn
• Swagger-UI version: 4.1.3
• Swagger/OpenAPI version: OpenAPI 3.0

Description

Build is broken with react-scripts 5.0.0 which has upgraded to webpack 5 which no longer includes polyfills for node.js, needed by the xml package used by swagger-ui-react.

To reproduce

Upgrade to react-scripts 5.0.0, e.g yarn upgrade -L.

$ yarn build
yarn run v1.22.10
$ react-scripts build
Creating an optimized production build...
Failed to compile.

Module not found: Error: Can't resolve 'stream' in '/home/haavardw/git/nfcert/dropped/web/node_modules/xml/lib'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
        - install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "stream": false }


error Command failed with exit code 1.

[Ciriak]

Any update or backup solution on this ? I have the same issue :(

[rjmcloudh]

Any solution??-

[lucid-jin]

Webpack 5 not suuported Buffer

1. Setup Webpack condig resolve.fallback: { "stream": false }
2. https://viglucci.io/how-to-polyfill-buffer-with-webpack-5 Please note

[piotrekwitkowski]

Any updates on this? When can it be merged?

[haavardw]

#7826 did not fix the build issue...

[piotrekwitkowski]

@haavardw Can you paste the errors you're getting?

[haavardw]

Here's the commands I use to create a new project from scratch and the final error message

$ nvm use 14
$ npx create-react-app my-app --template typescript
$ yarn add swagger-ui-react @types/swagger-ui-react
$ cat <<EOF > src/App.tsx
import React from 'react';
import './App.css';
import SwaggerUI from "swagger-ui-react";
import "swagger-ui-react/swagger-ui.css";


function App() {
  return (
    <SwaggerUI spec="" />
  );
}

export default App;
EOF
$ yarn build

Output

yarn run v1.22.17
$ react-scripts build
Creating an optimized production build...
Failed to compile.

Module not found: Error: Can't resolve 'buffer' in '/home/haavardw/tmp/my-app/node_modules/swagger-ui-react'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "buffer": require.resolve("buffer/") }'
        - install 'buffer'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "buffer": false }


error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[haavardw]

Opened new issue: #7893