Use in Next JS throws SyntaxError when configuring boiler-plate

[rasmusfredrik]

Hello, I hope this is the right place to ask a question / report a problem.

The setup is Next JS running @react-three/fiber as follows:
import { Canvas, useLoader } from '@react-three/fiber'
import { TextureLoader } from 'three/src/loaders/TextureLoader'

Then the TextureLoader is initialised as follows:
const cloud = useLoader(TextureLoader, './textures/cloud.png')

At runtime the SyntaxError appears as:
import { ImageLoader } from './ImageLoader.js';
^^^^^^

SyntaxError: Cannot use import statement outside a module

Have not been able to find a solution to this issue anywhere.

Does anyone have any knowledge of how to tackle this problem and can help?

[CodyJasonBennett]

Nextjs relies on Node which expects commonjs dependencies. Threejs is written in ES6, so you'll have to either transpile it yourself with next-transpile-modules or something environment safe like three-stdlib.

iirc, Next 12 supports modules OOTB, but I'd look at the official starter for reference.

[rasmusfredrik]

"next": "^12.0.4"
"@react-three/fiber": "^7.0.21"
"three": "^0.135.0"
"three-stdlib": "^2.6.0"

That's the current THREE config in package.json

[CodyJasonBennett]

three-stdlib has transpiled targets for you -- it should work OOTB with no issue. Libraries like @react-three/drei provide hooks like useTexture built on top of three-stdlib and they work regardless of environment and platform.

[joshuaellis]

Have you tried import { TextureLoader } from 'three'?

[rasmusfredrik]

Thank you for your kind suggestion however using such import is causing a ReferenceError: document not defined

[joshuaellis]

That's odd. Can you provide a reproduction of the issue please?

[rasmusfredrik]

I hope I understand your question correctly, so here are the steps to reproduce.

1. I run npm run dev which fires up the next js environment
2. Open browser localhost that displays the error message: ReferenceError: document not defined
3. The terminal output says:
   error - Error: ReactDOMServer does not yet support Suspense.
   error - ReferenceError: document is not defined
4. The code to make this happen:

import '../styles/index.css'
import { useEffect, Fragment } from 'react'
import { useRouter } from 'next/router'
import * as ga from '../lib/ga'
import { Canvas, useLoader } from '@react-three/fiber'
import { TextureLoader } from 'three'

function ComicSaint({ Component, pageProps }) {
  //const [canvasVisible, setCanvasVisible] = useState(true) 
  const router = useRouter()
  const cloud = useLoader(TextureLoader, './textures/cloud.png')

  useEffect(() => {
    const handleRouteChange = (url) => {
      ga.pageview(url)      
    }
    //When the component is mounted, subscribe to router changes
    //and log those page views
    router.events.on('routeChangeComplete', handleRouteChange)

    // If the component is unmounted, unsubscribe
    // from the event with the `off` method
    return () => {
      router.events.off('routeChangeComplete', handleRouteChange)
    }
  }, [router.events])

return (
    <Fragment>
      <Canvas camera={{ position: [1,0,5], fov: 60 }}>       
        <ambientLight color={0x555555} />  
        <fog attach="fog" args={["#03544e", 0.001 ]} />
        <color attach="background" args={["#03544e"]} />  
        <mesh>
          <meshStandardMaterial map={cloud} />
          <planeBufferGeometry attach="geometry" args={[500, 500]} />  
        </mesh>       
      </Canvas>    
      <Component {...pageProps} />         
    </Fragment>
  )
}

export default ComicSaint

[joshuaellis]

Don't actually just copy and paste it 😓 or if you are, use some intuition and either split the components into two files or do export { MY_COMPONNENT_NAME }

[rasmusfredrik]

Hey, I have been playing around with your code and got it to run successfully so it works however I am not sure why I need to import the entire THREE library to useLoader. Wouldn't it be better if this functionality is extended via React-Three-Fiber?

[joshuaellis]

Well you're importing from src in THREE and it's clearly not compiled as nextjs wants it, so from this point you'll have to take it up with them on their repo. AFAIK their tree shaking is pretty good no so I wouldnt worry about "importing the entire THREE library"

[rasmusfredrik]

Thank you for your guidance I am still experiencing issues with the TextureLoader so I will figure out what the next steps could be.

[CodyJasonBennett]

I think part of the issue is that three itself is not safe for SSR -- TextureLoader will use browser APIs to load images.

Maybe you can turn SSR off for this component with next/dynamic.