Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

172
Views
Webpack config in gatsby.js for useGLTF from "@react-three/drei" for .gltf

Hi. I'm have this error when i load .gltf file from Blender :

Module parse failed: Unexpected token (2:12) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

| {
>     "asset" : {
|         "generator" : "Khronos glTF Blender I/O v1.7.33",
|         "version" : "2.0"

I add gatsby-node.js:

 exports.onCreateWebpackConfig = ({
                                     stage,
                                     rules,
                                     loaders,
                                     plugins,
                                     actions,
                                 }) => {
    actions.setWebpackConfig({
        module: {
            rules: [
                {
                    test: /\.gltf$/,
                    use: [
                        `url-loader`,
                    ],
                },
            ],
        },
    })
}

But its still not work.

My component:

import {useGLTF} from "@react-three/drei";
import logo from '/src/components/react.gltf'

const Model = () => {
    const group = useRef()
    const { nodes, materials } = useGLTF(logo)
    return (
        <group ref={group} {...props} dispose={null}>
            <mesh geometry={nodes.Text.geometry} material={materials['Material.001']} rotation={[Math.PI / 2, 0, 0]} />
            <mesh
                geometry={nodes.Text001.geometry}
                material={materials['Material.002']}
                position={[0, 0, 0.04]}
                rotation={[Math.PI / 2, 0, 0]}
            />
        </group>
    )

}


export default Model


about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!