模块构建失败：SyntaxError: Unexpected token（三个点）答案

【问题标题】：Module build failed: SyntaxError: Unexpected token (three dots)模块构建失败：SyntaxError: Unexpected token（三个点）
【发布时间】：2020-08-13 14:15:47
【问题描述】：

webpack 有一个小问题。我有以下不是我的代码：

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

我收到以下错误：

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

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

我通常不使用...，所以我不确定是什么问题。用另一种语法方法代替 ... 的需要以使其工作的最佳方法是什么？

【问题讨论】：

另一种选择是使用Object.assign({[file]: 1}, pointer.files)
我认为您缺少分配 ...pointer.files 值的属性名称
什么是pointer.files，而不是{}？
@DavideBulbarelli 您可以将对象传播到其他对象中（从 ES9 开始），因此它不需要属性名称
听起来 babel 配置不正确。

标签： javascript vue.js

【解决方案1】：

我遇到了类似的问题。我使用npm run watch 构建我的javascript 文件并在命令行上收到以下错误：

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

在浏览器中，控制台显示如下错误：

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

我可以通过在 Stackoverflow 上应用基于 other posts 的解决方案来解决问题：

npm install babel-plugin-transform-object-rest-spread
在项目根目录下创建一个.babelrc并添加这些行

（现在 Stackoverflow 上的一个奇怪错误：当我将这行答案留空时，下面的代码块不会呈现为代码）

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

顺便说一下，这三个点被称为spread syntax。

【讨论】：