ReferenceError: document is not defined (with useLoader)

[sovetski]

When I run npm run build, I get this error on a nextjs application: "ReferenceError: document is not defined" so the build is cancelled due to this error

My code:

"use client";

import { Canvas, useLoader } from "@react-three/fiber";
import * as THREE from "three";

export default function Page() {

    const backgroundImage = useLoader(THREE.TextureLoader, "/bg.png");

    return (
        <Canvas scene={{ background: backgroundImage }}>
        {/* blabla */}
        </Canvas>
    );
}

When I remove this part the build works correctly

const backgroundImage = useLoader(THREE.TextureLoader, "/bg.png");

My dependencies:

    "dependencies": {
        "@react-three/drei": "^9.112.0",
        "@react-three/fiber": "^8.17.7",
        "@types/three": "^0.168.0",
        "next": "~14.2.11",
        "react": "^18.3.1",
        "react-dom": "^18.3.1",
        "three": "^0.168.0"
    },

[sovetski]

As a temporary solution I am using it with try catch, build process pass but it does not work correctly, any idea on what is the problem?

    let backgroundImage = null;

    try {
        backgroundImage = useLoader(THREE.TextureLoader, "/bg.png");
    } catch (error) {}

For information, when I use it with Suspense like explained in the documentation here, I get the Uncaught Error: document is not defined even without build process

EDIT:

So this version looks working:

    let backgroundImage = null;

    try {
        backgroundImage = new THREE.TextureLoader().load("/bg.png");
    } catch (error) {}

Something is wrong with useLoader? I don't really like the try catch but as a temporary solution I will keep this for the moment

[CodyJasonBennett]

TextureLoader is requiring browser APIs that aren't available on the server (client components are still server-prerendered). I would advise you to disable SSR for the Canvas with next/dynamic. https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading#with-no-ssr

As an additional note, try to keep hooks within the Canvas, so instead:

// MyCanvas.jsx
import { Canvas, useLoader } from "@react-three/fiber";
import * as THREE from "three";

function Background() {

    const texture = useLoader(THREE.TextureLoader, "/bg.png");
    return <primitive object={texture} attach="background" />; // either this or write scene.background

}

export default function Page() {

    return (
        <Canvas>
            <Background />
        {/* blabla */}
        </Canvas>
    );
}

'use client';

import dynamic from 'next/dynamic';

const Page = dynamic(() => import('./Page'), { ssr: false });