Error loading gltf with react-three-fiber and jsxgltf

Questions
, , ,
1

Followed the starter example in the repo but with changed assets.

I checked the one model with a gltf validator and it says it doesn’t have errors.
https://github.khronos.org/glTF-Validator/

got the model from here as well.

yet with or without this model. I get a series of errors and I have no clue what the issue is. What am I missing and/or does anyone have an idea on how to solve?

### Errors

ERROR in ./node_modules/@react-three/drei/core/softShadows.js 11:40
Module parse failed: Unexpected token (11:40)
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
|   rings = 11
| } = {}) => `#define LIGHT_WORLD_SIZE ${size}
> #define LIGHT_FRUSTUM_WIDTH ${frustrum ?? frustum}
| #define LIGHT_SIZE_UV (LIGHT_WORLD_SIZE / LIGHT_FRUSTUM_WIDTH)
| #define NEAR_PLANE ${near}
 @ ./node_modules/@react-three/drei/index.js 50:0-52 50:0-52
 @ ./src/components/3d/Model.js
 @ ./src/index.js
 @ multi ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ErrorOverlayEntry.js ./src/index.js

ERROR in ./node_modules/@react-three/drei/web/Html.js 129:61
Module parse failed: Unexpected token (129:61)
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
|   const transformOuterRef = React.useRef(null);
|   const transformInnerRef = React.useRef(null);
>   const target = (portal == null ? void 0 : portal.current) ?? gl.domElement.parentNode;
|   React.useEffect(() => {
|     if (group.current) {
 @ ./node_modules/@react-three/drei/index.js 1:0-37 1:0-37
 @ ./src/components/3d/Model.js
 @ ./src/index.js
 @ multi ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ErrorOverlayEntry.js ./src/index.js

webpack config
test: /.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: require.resolve(‘babel-loader’),
options: {
plugins: [
isDevelopment &&
require.resolve(‘react-refresh/babel’),
].filter(Boolean),
},

package.json

"dependencies": {
        "@react-three/drei": "^5.1.2",
        "@react-three/fiber": "^6.1.5",
        "react": "^16.13.1",
        "react-dom": "^16.13.1",
        "react-three-fiber": "^4.2.21",
        "three": "^0.128.0"
    },
    "devDependencies": {
        "@babel/core": "^7.11.6",
        "@babel/preset-env": "^7.11.5",
        "@babel/preset-react": "^7.10.4",
        "@pmmmwh/react-refresh-webpack-plugin": "^0.4.2",
        "babel-loader": "^8.1.0",
        "css-loader": "^4.3.0",
        "dei": "^0.1.0",
        "html-webpack-plugin": "^4.4.1",
        "react-refresh": "^0.8.3",
        "style-loader": "^1.2.1",
        "webpack": "^4.44.1",
        "webpack-cli": "^3.3.12",
        "webpack-dev-server": "^3.11.0"
2

this is not three or gltf, your build system seems to have problems understanding the nullish coalescing operator (??). but either way, i just removed it, that frustrum check looked dodgy anyway. it should be ok now.

generally, it’s a common operator and supported in all browsers - would make sense for you to update the build system anyway, nullish coalescing is a nice thing to have. :slightly_smiling_face:

3

Thank you for writing! How were you able to see that it was the nullish coalescing operator? also, you mention deleting it or updating it, but I’m not sure how to do that. Is there a good guide/repo you’d point me to? Still very green, and trying to learn :slight_smile:

4

the error messages make that clear. “??” is a newer javascript operator, and for some reason what you’re using to build a project doesn’t understand what it is. i think you should make that work, maybe it’s babel related or whatever, but it will fail for any piece of code that has it.

5

ok. thank you. I’ll dig into babel and try to figure it out. When I do I’ll post the solution on here.