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

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]

[Mugen87]

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

[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.