React "window is not defined" when using react-globe [duplicate]

Question

Code I try to copy: https://codesandbox.io/s/knhlr?file=/src/index.tsx:0-691

Dependencies: "@next/font": "^13.0.5", "eslint-config-next": "13.0.4", "next": "13.0.4", "react": "18.2.0", "react-dom": "18.2.0", "sharp": "^0.31.2", "three": "0.109.0", "react-globe": "5.0.2", "es6-tween": "5.5.10"

My Next.js (React) code renders a white page and writes in the console: "window is not defined"

"use client";

import ReactGlobe from "react-globe";

import markers from "./markers";
import markerRenderer from "./markerRenderer";

const options = {
    markerRenderer,
};

export default function App() {
    return (
        <div className="App">
            <ReactGlobe
                height="100vh"
                globeTexture="https://raw.githubusercontent.com/chrisrzhou/react-globe/main/textures/globe_dark.jpg"
                markers={markers}
                width="100vw"
                options={options}
            />
        </div>
    );
}

The duplicate issue is not the right one, you are in a situation where importing the module crashes the server, while the question marked as duplicate is the situation where importing work but not rendering. The correct solution here is using next/dynamic as listed here: stackoverflow.com/questions/73679783/… — Eric Burel
– Eric Burel, Commented Dec 28, 2023 at 14:10

David Benko · Accepted Answer · 2022-11-27 19:52:26Z

1

I thought client components are only rendered on the browser but apparently client components can also be pre-rendered on the server and hydrated on the client.

See this discussion: https://github.com/vercel/next.js/discussions/42319

answered Nov 27, 2022 at 19:52

David Benko

3751 gold badge7 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Amirhossein · Accepted Answer · 2022-11-28 15:16:11Z

0

Have you tried this ?

"use client";

import ReactGlobe from "react-globe";

import markers from "./markers";
import markerRenderer from "./markerRenderer";

const options = {
    markerRenderer,
};

export default function App() {
    return (
        <div className="App">
            {
              typeof window !== undefined ?
                <ReactGlobe
                  height="100vh"
                  globeTexture="https://raw.githubusercontent.com/chrisrzhou/react-globe/main/textures/globe_dark.jpg"
                  markers={markers}
                  width="100vw"
                  options={options}
                />
              :
                null
            }
        </div>
    );
}

Update:

You can fix it by dynamically import your library:

import dynamic from 'next/dynamic';

const ReactGlobe = dynamic(import('react-globe'), { ssr: false });

edited Nov 28, 2022 at 15:16

answered Nov 27, 2022 at 20:00

Amirhossein

2,0571 gold badge8 silver badges10 bronze badges

2 Comments

Stautenberg Over a year ago

Yes. Same error. "window is not defined"

Amirhossein Over a year ago

@Stautenberg I updated my answer. Could you test the new solution ?

Collectives™ on Stack Overflow

React "window is not defined" when using react-globe [duplicate]

2 Answers 2

Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Linked

Related