模块构建失败：语法错误：意外的标记（三个点）

Question

我遇到了一个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 |                     });

通常我不使用 ... 所以我不确定问题出在哪里。为了使它工作，最好用另一种语法方法替换 ... 的需求是什么？

- vesii

---

另一个选项是使用 Object.assign({[file]: 1}, pointer.files)。 - Nick Parsons

我认为您遗漏了要分配...pointer.files值的属性名称。 - Davide Bulbarelli

当pointer.files不是{}时，它是什么？ - fedesc

@DavideBulbarelli，你可以将对象展开到其他对象中（自ES9起），因此不需要属性名称。 - Nick Parsons

听起来像是Babel没有正确配置。 - Aluan Haddad

Answer 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 上基于其他帖子的这个解决方案来解决问题：

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

2. 在项目的根目录中创建 .babelrc 文件并添加以下内容：

（现在 Stackoverflow 上有一个奇怪的 bug：如果我将我的答案留空，下面的代码块就不会被呈现为代码）

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

顺便说一下，这三个点被称为扩展语法。

- LololoTheGreat

---

在 .babelrc 文件中有两个额外的逗号，这将导致构建出现错误。即使移除了逗号，可惜这并没有为我解决错误。 - Haydentech