Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
1 of 7 tasks
reconbot opened this issue Jul 1, 2021 · 0 comments
Open
1 of 7 tasks

Comments

@reconbot
Copy link

reconbot commented Jul 1, 2021

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):

  • GraphQL Playground - Electron App
  • GraphQL Playground HTML
  • GraphQL Playground
  • GraphQL Playground Express Middleware
  • GraphQL Playground Hapi Middleware
  • GraphQL Playground Koa Middleware
  • GraphQL Playground Lambda Middleware

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant