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?

Answer 1

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:

1. npm install babel-plugin-transform-object-rest-spread

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