Issues with Loading GLB with react-three-fiber and next js

Questions
, ,
22

@drcmda ,
Im getting error:
./public/3d/island.glb
Module parse failed: Unexpected character ‘’ (1:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See Concepts | webpack

Dont know what i did wrong. Can you help me debug?

import React, { useRef, useEffect } from "react";
import { useGLTF } from "@react-three/drei";
import { useFrame, useThree } from "@react-three/fiber";
import { a } from "@react-spring/three";

import islandScene from "@public/3d/island.glb";

const Island = (props: any) => {
  const islandRef = useRef<any>();
  const { nodes, materials } = useGLTF(islandScene);
  useGLTF.preload(islandScene);
  return (
    <a.group ref={islandRef} {...props} dispose={null}>
      <mesh
        geometry={nodes.polySurface944_tree_body_0.geometry}
        material={materials.PaletteMaterial001}
      />
      <mesh
        geometry={nodes.polySurface945_tree1_0.geometry}
        material={materials.PaletteMaterial001}
      />
      <mesh
        geometry={nodes.polySurface946_tree2_0.geometry}
        material={materials.PaletteMaterial001}
      />
      <mesh
        geometry={nodes.polySurface947_tree1_0.geometry}
        material={materials.PaletteMaterial001}
      />
      <mesh
        geometry={nodes.polySurface948_tree_body_0.geometry}
        material={materials.PaletteMaterial001}
      />
      <mesh
        geometry={nodes.polySurface949_tree_body_0.geometry}
        material={materials.PaletteMaterial001}
      />
      <mesh
        geometry={nodes.pCube11_rocks1_0.geometry}
        material={materials.PaletteMaterial001}
      />
    </a.group>
  );
};

export default Island;