OBJ and GLTF Loaders never work with nextjs

[jfoxworth]

One of the problems that I have always had in three.js is that that loaders simple do not work. I have abandoned whole projects because of this and worked around it time after time. I really need this to work, but it doesn't. Attempting to import a loader for a gltf or an obj file like this...

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';

Always results in an error like a syntax error for a semicolon that points here ...

module.exports = require("three/examples/jsm/loaders/GLTFLoader");

I have tried probably 20 different ways to make this happen and the simple fact is that this does not work. I was hoping that by some miracle r3f would correct this, but the problem persists. Any suggestions?

[joshuaellis]

what bundler are you using?

[jfoxworth]

Not sure. Looks like babel with next.js. Could that be the problem?

[joshuaellis]

yeah, so basically with next.js you need to either use their dynamic component with ssr:false OR use the library next-transpile-modules in my experience the latter has been a lot simpler dev experience. This is all down to the use of modules in the examples folder. Keep an eye on our other library, three-stdlib it aims to stop this in the future.

[DevMemberR]

I almost gave up on Next.js for three.js projects until I found next-transpile-modules. Be sure to include the relevant libraries the next.config.js.

const withTM = require("next-transpile-modules")([
  "three",
  "@react-three/drei",
  "react-postprocessing",
  "react-spring/three",
]);
module.exports = withTM();

In terms of importing the GLTFs, I have been using gltfjsx for the past two days and it has been a dream. https://github.com/pmndrs/gltfjsx