GLTFExporter: Optional Chaining (ES2020) breaks Webpack

[pss2138]

Describe the bug

When I simply try importing GLTFExporter by
"import { GLTFExporter } from "three/examples/jsm/exporters/GLTFExporter.js";",
this error below occurs:

`Uncaught Error: Module parse failed: Unexpected token (563:35)
You may need an appropriate loader to handle this file type.
| if (metalnessMap === roughnessMap) return metalnessMap;
| console.warn('THREE.GLTFExporter: Merged metalnessMap and roughnessMap textures.');

  var metalness = metalnessMap?.image;

| var roughness = roughnessMap?.image;
| var width = Math.max(metalness?.width || 0, roughness?.width || 0);
at ./node_modules/three/examples/jsm/exporters/GLTFExporter.js (three.module.js:40245:1)
at webpack_require (bootstrap:786:1)
at fn (bootstrap:149:1)
at ./src/pages/CharacterDetailPage/index.js (styles.js:147:1)
at webpack_require (bootstrap:786:1)
at fn (bootstrap:149:1)
at ./src/routes/Router.js (CreatorRoute.js:8:1)
at webpack_require (bootstrap:786:1)
at fn (bootstrap:149:1)
at ./src/App.js (index.css:9:1)
at webpack_require (bootstrap:786:1)
at fn (bootstrap:149:1)
at ./src/index.js (index.css?02e3:45:1)
at webpack_require (bootstrap:786:1)
at fn (bootstrap:149:1)
at 0 (validationUtils.js:101:1)
at webpack_require (bootstrap:786:1)
at checkDeferredModules (bootstrap:45:1)
at Array.webpackJsonpCallback [as push] (bootstrap:32:1)
at main.chunk.js:1:57
`

Code

import { GLTFExporter } from "three/examples/jsm/exporters/GLTFExporter.js";

• I even did not define, nor use new GLTFExporter() in code yet. Just imported.

Screenshots

** Version **
"three": "^0.140.2"

This error message is all I see from the console.
Thank you for your contributions in advance.

[pss2138]

three-gltf-exporter wrapper library works fine, but I wish to use original library from three.js

[pss2138]

It was a style syntax error in GLTFExporter.js (line 703 ~ 707).

`const metalness = metalnessMap.image;
const roughness = roughnessMap.image;

const width = Math.max( metalness.width || 0, roughness.width || 0 );
const height = Math.max( metalness.height || 0, roughness.height || 0 );`

I omitted ? from these lines.
However, it is not a good way to handle libraries. There should be better ways to fix this issue.

[donmccurdy]

Optional chaining ?. is an ES2020 feature. Related discussions:

• lint: add browser compat check #23763
• NPM Package raises "unexpected token ..." when building with webpack #22618
• Please don't be too aggressive to using the new JS feature syntax in build files #23480

I think we've landed on adding a lint step, that warns us before shipping features that don't have widespread browser support. Optional chaining is widely supported in browsers, and presumably passes the lint for that reason, but it seems that your bundler (webpack 4?) may not support the feature without a plugin like Babel:

https://stackoverflow.com/questions/59972341/how-to-make-webpack-accept-optional-chaining-without-babel

Do you have the option of updating webpack, or using the Babel plugin? I think we'd prefer to use featuresets we can lint against, rather keeping track of individual feature support in older bundlers.

[pss2138]

figured out. I am using React, and as @donmccurdy said, it was ES2020 feature issue.

As I have updated react-scripts version from "2.4-" to latest "5.1-" in package.json, and the issue has been corrected.
Hope other people may refer this ticket! thank you.