The swagger-ui-react NPM Package doesn't work under Gatsby

[reselbob]

Preliminary Checks

• This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
• This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

The swagger-ui-react package errors when try to run it in Gatsby. I get a WebPack error.

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

The argument 'path' must be a string or Uint8Array without null bytes. Received
'/Users/reselbob/Projects/swagger-ui-gatsby/gatsby-swagger-ui-demo/node_modules/es5-ext/array/\x00#/e-index-of.js'

I'll put the reproduction steps below and in the section, Reproduction Link.

Reproduction Link

swagger-api/swagger-ui#7443

Steps to Reproduce

Step 1: Install the Gatsby CLI

npm install -g gatsby-cli

Step 2: Use the CLI to create a vanilla Gatsby app.

gatsby new

You can follow the instructions here.

Step 3: Substitute the contents of the file, src/pages/index.js with the following code:

import * as React from "react"
import SwaggerUI from "swagger-ui-react"
import "swagger-ui-react/swagger-ui.css"

// markup
const IndexPage = () => {
  return (
    <div>
      hi
    </div>   
  )
}

export default IndexPage

Step 4: Compile the Gatsby app

gatsby develop

Expected Result

https://drive.google.com/file/d/14eTpcIAa_aVELKT3veDkygF2Rk3oXXNT/view?usp=sharing

Actual Result

success open and validate gatsby-configs, load plugins - 2.121s
success onPreInit - 0.035s
success initialize cache - 0.006s
success copy gatsby files - 0.240s
success Compiling Gatsby Functions - 0.789s
success onPreBootstrap - 0.821s
success createSchemaCustomization - 0.012s
success Checking for changed pages - 0.002s
success source and transform nodes - 0.150s
success building schema - 0.471s
success createPages - 0.001s
success createPagesStatefully - 0.091s
info Total nodes: 32, SitePage nodes: 4 (use --verbose for breakdown)
success Checking for changed pages - 0.001s
success update schema - 0.179s
success write out redirect data - 0.039s
success onPostBootstrap - 0.003s
info bootstrap finished - 9.634s
success onPreExtractQueries - 0.001s
success extract queries from components - 0.381s
success write out requires - 0.090s
success run page queries - 0.022s - 1/1 46.21/s
success Caching HTML renderer compilation - 0.001s

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

The argument 'path' must be a string or Uint8Array without null bytes. Received
'/Users/reselbob/Projects/swagger-ui-gatsby/my-gatsby-site/node_modules/es5-ext/array/\x00#/e-index-of.js'

failed Building development bundle - 11.480s
ERROR in The argument 'path' must be a string or Uint8Array without null bytes. Received 
'/Users/reselbob/Projects/swagger-ui-gatsby/my-gatsby-site/node_modules/es5-ext/array/\x00#/e-index-of.js'

webpack compiled with 1 error
success Writing page-data.json files to public directory - 0.247s - 1/2 8.08/s

---

Notice I am not calling the swagger-ui-react. I am just using the import statement.

I hope you can help me. It's a critical path item. Thanks in advance.

Environment

System:
    OS: macOS 11.2.3
    CPU: (8) x64 Apple M1
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.15.3 - /usr/local/bin/node
    Yarn: 1.22.5 - ~/.yarn/bin/yarn
    npm: 7.6.3 - /usr/local/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 92.0.4515.107
    Safari: 14.0.3
  npmGlobalPackages:
    gatsby-cli: 3.10.0

Config Flags

No response

[LekoArts]

Hi!

I think you already found #11081 - here's an example PR where they implemented it: https://github.com/COVID19Tracking/website/pull/517/files

[reselbob]

Here is a solution that Eric Kiilu, github.com/ekiilu and I developed: https://github.com/reselbob/swagger-ui-gatsby-integration