NPM Package raises "unexpected token ..." when building with webpack

[AnimeshSinha1309]

Describe the bug

Building a react module with an import of three.js fails with the following error:

ERROR in ./~/three/build/three.js
Module parse failed: /home/animesh/Code/Research/mlq-visualizers/molecular_graphs/static/node_modules/three/build/three.js Line 1910: Unexpected token ...
You may need an appropriate loader to handle this file type.
|                       this.viewport.copy(source.viewport);
|                       this.texture = source.texture.clone();
|                       this.texture.image = { ...this.texture.image
|                       }; // See #20328.
| 

To Reproduce

Steps to reproduce the behavior:

1. Run npm install --save three
2. Make a webpack file
3. Write in the rest of the code, following https://www.smashingmagazine.com/2020/11/threejs-react-three-fiber/
4. Run webpack and see the error

Code

Just importing the module leads to the error.

Live example

JSFiddle examples not included.

Expected behavior

The webpack should either work, since before adding in the three library the rest of react worked great with webpack, or it should raise an error tracable from my code.

Screenshots

Platform:

• Device: [Desktop]
• OS: [Linux]
• Three.js version: [0.132.2, 0.133.0]

[donmccurdy]

The JS code at the line shown is valid, so I think it's a matter of configuring Webpack as needed for modern JS features. Perhaps the "es2015" preset mentioned here will help? https://stackoverflow.com/questions/33460420/babel-loader-jsx-syntaxerror-unexpected-token

[gm112]

Your version of webpack is really out of date. Version 1 is really, really old, so I would highly suggest updating your version of Webpack. The current version is 5.

[donmccurdy]

Closing as this seems to be a configuration issue. It appears to be more related to Webpack than to three.js, so Stack Overflow might be the best option, but if you do need help getting three.js to work on this project I'd recommend the forums (https://gltf-transform.donmccurdy.com), Slack, or Discord.

[Hexronimo]

This is because of line
this.texture.image = { ...this.texture.image }; // See #20328.
which uses spread operator for object literals from es2018.
We have a problem with this in our project too, it is the only line in the threejs module with this new spread.

Is there no way to rewrite this to support older standards? I understand that 2015 is very old, most people don't need it anymore, but I'm asking just in case.

[Mugen87]

I think it's okay to rewrite the code without the spread operator.

[donmccurdy]

Hm, we should identify the JavaScript version we are using, and ideally put in place tests to enforce it. Here we've removed a very common ES2018 feature, but in #23229 we're adding ES2020 features like optional chaining. In my opinion the published package should use modern (but not bleeding edge...) defaults, and let users transpile back to older browser compatibility if they need that support.

Is it possible for DeepScan to warn us if we use features outside of ES2018, ES2020, or some other threshold?

[mrdoob]

Hm, we should identify the JavaScript version we are using, and ideally put in place tests to enforce it.

Agreed 👍

Is it possible for DeepScan to warn us if we use features outside of ES2018, ES2020, or some other threshold?

I don't think there is a way, but I bet they'll like to hear the feature request.