graphql / graphql-playground

🎮 GraphQL IDE for better development workflows (GraphQL Subscriptions, interactive docs & collaboration)
MIT License
8.75k stars 730 forks source link

Importing Playground in server side react crashes on module load on nextjs #1336

Open reconbot opened 3 years ago

reconbot commented 3 years ago

Importing Playground with nextjs and it's SSR crashes on module load. It crashes when being imported in any nodejs environment as far as I can tell.

This issue pertains to the following package(s):

What OS and OS version are you experiencing the issue(s) on?

"next": "^11.0.0" "react": "^17.0.2"

What version of graphql-playground(-electron/-middleware) are you experiencing the issue(s) on?

"graphql-playground-react": "^1.7.27"

What is the expected behavior?

The module loads when I load the module without rendering it.

What is the actual behavior?

The module looks for window and crashes because window doesn't exist. It doesn't even need to be rendered.

It crashes with the following stack trace

ReferenceError: window is not defined
    at Object.<anonymous> (/node_modules/graphql-playground-react/lib/state/sessions/fetchingSagas.js:218:1)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (/node_modules/graphql-playground-react/lib/state/sessions/reducers.js:63:23)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)

What steps may we take to reproduce the behavior?

Make a nextjs app and include the following on the top of any page. Rendering the component is not necessary.

import { Playground } from 'graphql-playground-react'

Please provide a gif or image of the issue for a quicker response/fix.

The offending line is here

;(window as any).schemaFetcher = schemaFetcher

I don't need to render the playground server side, that's a sperate issue, but it would be very helpful if it didn't crash when rendering the shell of the page for it to load because I have it imported.

My workaround for any nextjs users who want to use graphql-playground