search

stoplightio / elements

Build beautiful, interactive API Docs with embeddable React or Web Components, powered by OpenAPI and Markdown.
https://stoplight.io/open-source/elements/
Apache License 2.0
1.74k stars 202 forks source link

Gatsby build fails when using @stoplight/elements #1762

Open hirenoble opened 3 years ago

hirenoble commented 3 years ago

The Gatsby build fails as there is no "window" component on server side rendering. image

A clear and concise description of what the bug is.

To Reproduce

  1. Given this OpenAPI document '...'
  2. Run this CLI command '....'
  3. See error

Expected behavior

A clear and concise description of what you expected to happen.

Additional context

Add any other context about the problem here.

Screenshots If applicable, add screenshots to help explain your problem.

Environment (remove any that are not applicable):

Nezteb commented 3 years ago

Hi @hirenoble!

I tried Googling that specific Gatsby error and found this SO thread: https://stackoverflow.com/a/64313153

If you tweak your webpack config as suggested in the accepted answer, does that fix anything? Also, what happens if you try gatsby develop instead of gatsby build?

estrattonbailey commented 2 years ago

Hey all 👋 greatly appreciate this library, v cool that Stoplight supports this in any capacity.

Edit from previous post: I found one of your examples outlining a similar approach.

For anyone seeing this trying to integrate with Next.js or similar frameworks that require server-side/non-browser rendering, try this when instantiating the libraries in this repo 👍 

router={typeof window === 'undefined' ? 'memory' : 'history'}
ismaelrumzan commented 2 years ago

Thank you @estrattonbailey I was trying to implement elements in a brand new next.js project and this solved my issue. Here is the final code


import Head from "next/head";
import { API } from "@stoplight/elements";
import "@stoplight/elements/styles.min.css";

export default function Home() {
  return (
    <div>
      <Head>
        <title>Example API</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <API
        apiDescriptionUrl="https://raw.githubusercontent.com/stoplightio/Public-APIs/master/reference/zoom/openapi.yaml"
        router={typeof window === "undefined" ? "memory" : "history"}
      />
    </div>
  );
}