React "window is not defined" when using react-globe

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>
    );
}

Answer 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

Answer 2

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 });