Best workaround for Cannot use import statement outside a module when importing from three/jsm

[neefrehman]

I'm using r3f in a next.js app and running into this problem when importing OBJLoader, and when importing OrbitControls from drei (as that module imports from three/examples/jsm/).

I've seen from pmndrs/gltfjsx#20 (comment) that this is an issue with three as the files from three/examples/jsm/ aren't written as modules, so I'm not looking for a fix.

Does anyone have a workaround for this? Currently I'm doing the below, but I'm not enjoying the solution. Is there a better way?

Also, is there a reason why this is only an issue with Next and not Gatsby (which I've tried successfully before)? What is different between their Webpack setups or react-dom-server implementations?

ideal:

import React from "react";
import { useLoader } from "react-three-fiber";
import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";

import modelFile from "./models/path-to-model.obj";

const Model = () => {
    const model = useLoader(OBJLoader, modelFile);
    return <primitive object={model} />;
};

export default Model;

workaround:

/* eslint-disable global-require */
/* eslint-disable @typescript-eslint/no-var-requires */
import React from "react";
import { useLoader } from "react-three-fiber";

import modelFile from "./models/path-to-model.obj";

let OBJLoader;

const Model = () => {
    OBJLoader = require("three/examples/jsm/loaders/OBJLoader").OBJLoader;
    const model = useLoader(OBJLoader, modelFile);

    return <primitive object={model} />;
};

export default Model;

[neefrehman]

Ok so I've fixed the issue by wrapping the top-level three scene component in React.lazy and Suspense, with a useEffect to only render it in the client (as react-dom-server doesn't support Suspense yet). I guess taking it out of Next's SSR process is what fixes it. Still unsure why this isn't an issue in Gatsby, though.

The solution is to write your r3f components with regular imports ('ideal' scenario above), and then add them to your next app like below:

import React, { useState, lazy, Suspense, useEffect } from "react";
import { styled } from "linaria/react";
import ErrorBoundary from "../../components/ErrorBoundary";

const ThreeCanvasComponent = lazy(() => import("./components/ThreeCanvasComponent"));

const App = () => {
    const [hasMounted, setHasMounted] = useState(false);
    useEffect(() => setHasMounted(true), []);

    return (
        {hasMounted && (
            <ErrorBoundary fallback={null}>
                <Suspense fallback={null}>
                    <ThreeCanvasComponent />
                </Suspense>
            </ErrorBoundary>
        )}
        <RestOfApp />
    );
};

export default App;

Another solution is to wrap the offending components each in Lazy inside the scene component. In the end I did this instead as I'm already using Suspense within Canvas for loading a model, so it leaves the component tree cleaner and doesn't require using useState for hasMounted:

import React, { Suspense, lazy } from "react";
import { Canvas } from "react-three-fiber";

import Lights from "./Lights";

const Controls = lazy(() => import("./Controls")); // has imports from three/jsm
const Model = lazy(() => import("./Planet")); // has imports from three/jsm

const ThreeCanvasComponent = () => (
        <Canvas
            concurrent
            camera={{ position: [0, 0, 20] }}
            style={{ height: "100vh", width: "100vw" }}
        >
            <Suspense fallback={null}>
                <Lights />
                <Model />
                <Controls />
            </Suspense>
        </Canvas>
    );

export default ThreeCanvasComponent;

Note that neither of these solutions work if the ThreeCanvasComponent is co-located with your page inside the pages subdirectory because of how Next uses this folder during build time.

[sftsk]

Another workaround with Next.js is to use their dynamic import: https://nextjs.org/docs/advanced-features/dynamic-import
Load the whole ThreeCanvasComponent like this and it seems to work jut fine which probably confirms that SSR is the issue.