Three.js / Syntaxis Error

[cristianvj]

Hi, I'm using Next.js with react-three-fiber, but I try load libreries fron three I get an Syntaxis Error:

SyntaxError: Cannot use import statement outside a module
three/examples/jsm/loaders/GLTFLoader
webpack:/external "three/examples/jsm/loaders/GLTFLoader":1
1 | module.exports = require("three/examples/jsm/loaders/GLTFLoader");

This is the code of component

/*
auto-generated by: https://github.com/react-spring/gltfjsx
*/
import * as THREE from 'three'
import React, { useRef } from 'react'
import { useLoader } from 'react-three-fiber'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'

export default function Model(props) {
  const group = useRef()
  const { nodes, materials } = useLoader(GLTFLoader, '/glb.gltf')
  return (
    <group ref={group} {...props} dispose={null}>
      <group rotation={[Math.PI / 2, 0, 0]}>
        <mesh material={materials.lambert2SG} geometry={nodes.Object_3.geometry} scale={[0.03, 0.03, 0.03]} />
        <mesh material={materials.lambert2SG} geometry={nodes.Object_4.geometry} />
      </group>
    </group>
  )
}

The same happens with other dependencies of the Three library, but when I use create-react-app the code run succesfully. Thanks

[jamesmosier]

This issue might be of some help: #9890

Aside from that issue, I was able to get around that error importing the <Model/> component via a dynamic import that is not server rendered:

import dynamic from 'next/dynamic'

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

[cristianvj]

Right, thanks @jamesmosier, other solution is:

import React, { Suspense, useEffect, useRef } from 'react'
import { Canvas, useLoader, useThree  } from 'react-three-fiber'

let GLTFLoader

function Model(props) {
  GLTFLoader = require('three/examples/jsm/loaders/GLTFLoader').GLTFLoader
  const group = useRef()
  const gltf = useLoader(GLTFLoader, 'glb/clothw.glb')
  return (
    <group ref={group} {...props} dispose={null}>
      <mesh 
        material={gltf.materials.lambert2SG} 
        geometry={gltf.nodes.Object_3.geometry} 
        scale={[0.03, 0.03, 0.03]} 
        material-color=""/>
      <mesh 
        material={gltf.materials.lambert2SG} 
        geometry={gltf.nodes.Object_4.geometry} 
        material-color="red" />
    </group>
  )
}
//....