Swagger-ui: ReferenceError: window is not defined

[pontuswallberg]

Q&A (please complete the following information)

• OS: macOS
• Browser: Chrome
• Version: 83.0.4103.97 (Official Build) (64-bit)
• Method of installation: yarn
• Swagger-UI version: "swagger-ui-react": "^3.26.2"
• Swagger/OpenAPI version: N/A

Content & configuration

Didn't need any YAML file to reproduce this.

Describe the bug you're encountering

ReferenceError: window is not defined

I have experience this both with Next.js and Docusaurus.

To reproduce...

Steps to reproduce the behavior:

1. yarn create next-app - I choose "swagger-test" as project name and Default template
2. cd swagger-test
3. yarn add swagger-ui-react
4. Edit index.js to just serve SwaggerUI:

import SwaggerUI from "swagger-ui-react";

export default function Home() {
  return (
    <SwaggerUI />)
}

1. yarn dev to start dev server
2. Compile error: ReferenceError: window is not defined

Expected behavior

Expect SwaggerUI to work with frameworks/libraries like Next.JS and Docusaurus that have server code where window isn't defined.

[naima-shk]

@char0n Can i try this one too?

[aaroncadillac]

same error

[ggalli]

same error

[char0n]

@naima-shk sure, go ahead

[la55u]

Having the same issue with Next.js dev server and "swagger-ui-react": "^3.28.0"

[char0n]

Right, I looks like this issue is basically adding a support for SSR (Server Side Rendering). I can see that we use window global and other global browser symbols directly in bodies of swagger-ui components. I don't fully understand next.js internals but I assume it tries to render <SwaggerUI /> component in node.js and then serve it to browser. As the node.js doesn't have any global window symbols it will fail on ReferenceError.

[fowad-sohail]

@char0n you're right the issue is SSR. I was able to solve this by disabling SSR and using next.js's dynamic import.

Standard SwaggerUI component in pages/docs/SwaggerUI.tsx:

import SwaggerUI from "swagger-ui-react"

export default function SwaggerDocs() {
      return (
          <SwaggerUI url="https://petstore.swagger.io/v2/swagger.json" />
      )
  }

Dynamically importing it in pages/docs/index.tsx:

const DynamicSwaggerUI = dynamic(() => import('./SwaggerUI'), {
    ssr: false,
  });

export default function DynamicSwaggerUIDocs() {
    return (
        <DynamicSwaggerUI />
    )
}

Here is also a helpful resource: https://codeconqueror.com/blog/next-js-disable-ssr

[char0n]

@fowad-sohail thank you for the workaround!

[fowad-sohail]

Of course! It's a pleasure to help the community that's helped me countless times 😄

[fowad-sohail]

UPDATE:
The solution I provided above works locally. However, when I deploy to Vercel, it throws the same error. I haven't looked into fixing it too far in depth just yet, but if someone finds a solution please do post here.

[luizcieslak]

Has anyone managed to make this work in Gatsby or Docusaurus?

[aaroncadillac]

@luizcieslak I tried to use this UI into a Docusaurus project, error is the same "Window is not defined"