drei: Build breaks on Node v12

three version: 0.128.0
@react-three/fiber version: 6.1.4
@react-three/drei version: 5.0.0
node version: 12.14.0
npm (or yarn) version: 7.7.6

Problem description:

After upgrading to v5, my project has stopped building. Has the build process for this library changed?

Relevant code:

[91mFailed to compile.

[0m[91m./node_modules/@react-three/drei/web/Html.js 109:61
Module parse failed: Unexpected token (109: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) {

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 2
Comments: 21 (9 by maintainers)

Most upvoted comments

I’m having the same issues. I found this: https://stackoverflow.com/questions/63251072/babel-preset-env-version-7-not-transforming-the-null-coalescing-operator

Environment: CRA 4.0.3 npm 7.13.0 node v12.16.1

Occurs by: Including ‘Html’ component.

And: https://github.com/tc39/proposal-nullish-coalescing

So I was able to make it output the polyfill by setting the rollup config to

  plugins: [
    ['@babel/transform-runtime', { regenerator: false, useESModules }],
    '@babel/plugin-proposal-nullish-coalescing-operator',
  ],

Or alternatively by following this https://babeljs.io/docs/en/babel-preset-env#include :

  presets: [
    [
      '@babel/preset-env',
      {
        loose: true,
        modules: false,
        targets,
        include: ['proposal-nullish-coalescing-operator', 'proposal-optional-chaining'],
      },
    ],
    '@babel/preset-react',
    '@babel/preset-typescript',
  ],

Adds the polyfill. But alas, including the built project breaks with complaints about:

I’d say my issue in now unrelated to the OP. But I hope this helps.

Edit - Repro:

npx create-react-app repro --template typescript
cd repro
npm i
npm i @react-three/drei @react-three/fiber

import { Html } from "@react-three/drei";
import { Canvas } from "@react-three/fiber";
import React from "react";
import "./App.css";

function App() {
  return (
    <div className="App">
      <Canvas>
        <Html>Dog</Html>
      </Canvas>
    </div>
  );
}

export default App;

$ npm start
Failed to compile.

./node_modules/@react-three/drei/core/softShadows.js 11:40
Module parse failed: Unexpected token (11:40)
File was processed with these loaders:
 * ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these 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}

Honga1 on May 19, 2021

Can you all try drei@5.1.5-beta.1 please. If it worked, a thumbs up will be fine, if it didn’t please only comment if no one else has.

joshuaellis on May 21, 2021

Hey i was facing the above issue, it seems to be happening in all versions after 5, i have rolled back to version ^4.1.2 and it is working fine with the rest of the packages

Epiczzor on May 20, 2021

I don’t think we should be transpiling our code for publishing. It makes it harder to debug for everyone involved. I think what you should be doing is asking react-scripts to include proposal-nullish-coalescing-operator in their babel config. Nextjs do it and i’ve never had an issue.

joshuaellis on May 20, 2021

drei: Build breaks on Node v12

Problem description:

Relevant code:

Suggested solution:

About this issue

Most upvoted comments