Module build failed: SyntaxError: Unexpected token (three dots)

Question

Having a small problem with the webpack. I have the following code which is not mine:

pointer.files = {
    ...pointer.files,
    [file]: 1
};

And I get the following error:

Module build failed: SyntaxError: Unexpected token (84:28)

  82 |                         pointer.files = pointer.files || {};
  83 |                         pointer.files = {
> 84 |                             ...pointer.files,
     |                             ^
  85 |                             [file]: 1
  86 |                         };
  87 |                     });

I usually don't use the ... so I'm not sure what the problem. What would be the best way to replace the need of ... with another syntax approach in order to make it work?

Another option would be to use Object.assign({[file]: 1}, pointer.files) — Nick Parsons
– Nick Parsons, Commented Aug 13, 2020 at 14:17
I think you are missing the property name to which assign ...pointer.files value — Davide Bulbarelli
– Davide Bulbarelli, Commented Aug 13, 2020 at 14:20
@DavideBulbarelli you can spread objects into other objects (as of ES9), so it doesn't need a property name — Nick Parsons
– Nick Parsons, Commented Aug 13, 2020 at 14:22

LololoTheGreat · Accepted Answer · 2021-12-30 20:44:32Z

2

I had a similar problem. I used npm run watch to build my javascript files and received the following error on the command line:

ERROR in ./react/src/common/components/RowPlaceholder.js
Module build failed: SyntaxError: Unexpected token (14:6)

  12 |       position: 'absolute',
  13 |       background: 'white',
> 14 |       ...style
     |       ^
  15 |     }}
  16 |   />
  17 | const buildStencil = stencil =>

 @ ./react/src/common/components/List.js 27:22-49

In the browser, the console showed the following error:

Uncaught Error: Cannot find module "./RowPlaceholder"
    webpackMissingModule List.js:5
    <anonymous> List.js:5
    Webpack 9

I could solve the problem by applying this solution based on other posts on Stackoverflow:

npm install babel-plugin-transform-object-rest-spread
Create a .babelrc in the root directory of the project and add these lines

(strange bug on Stackoverflow right now: when I leave this line of my answer empty the codeblock below is not rendered as code)

{
   "plugins": [
    "babel-plugin-transform-object-rest-spread",
  ],
}

The three dots are known as spread syntax, by the way.

answered Dec 30, 2021 at 20:44

LololoTheGreat

3291 silver badge14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Haydentech Over a year ago

There are 2 extra commas in the .babelrc which will cause the build to error out. Even with the commas removed, it unfortunately did not fix the error for me.

Collectives™ on Stack Overflow

Module build failed: SyntaxError: Unexpected token (three dots)

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related