ReferenceError: window is not defined

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.

[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

[aaroncadillac]

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