Babel加载器错误：无法理解rest/spread运算符

Question

当我尝试运行我的Webpack捆绑包时，控制台显示以下错误：

BabelLoaderError: SyntaxError: Unexpected token (113:19)

  111 | 
  112 | const render = () => ReactDOM.render(
> 113 |    <TodoApp todos={...store.getState()}/>,
      |                    ^
  114 |    document.getElementById("root")
  115 | )
  116 | 

因此，扩展运算符语法未被理解。但是，我已经安装了babel-stage-2预设，并在我的webpack.config.js加载程序中包含了它，如下所示：

module: {
        loaders: [
            {
               test: path.join(__dirname, 'public'),
               loader: ['babel-loader'],
               query: {
                 presets: debug ? ['react', 'es2015', 'react-hmre', 'stage-2'] : ['react', 'es2015', 'stage-2']
               }
            }
        ]
    }

我也尝试过安装babel-plugin-transform-object-rest-spread并将其添加到.babelrc中：

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

仍然收到相同的错误信息。

需要帮助，请麻烦！

- Paulos3000

---

你在那之后重新启动了webpack吗？ - Dimitri

出现这个错误，现在已经尝试了两个小时来找出问题所在，但是仍然没有任何帮助... :( - exoslav

Answer 1

我有一个与Vue项目类似的问题。

我已经添加了：

{
  "presets": [
    ["es2015", {"modules": false}],
    ["stage-2"]
  ],
  "plugins": ["transform-object-rest-spread"]
}

在.babelrc中尝试了很多方法，但似乎没有任何效果。

如preset-env插件的注意事项部分所述，您应该至少拥有v6.19.0，而我的版本是v6.23.0，但仍然不起作用。 编辑：我已经在这里找到了答案。 我的解决方案：

/*
 * additional javascript loader for es6 code in node_modules that have to be transpiled also
 */
{
    test: /\.jsx?$/,
    include: [
        NODE_MODULES + '/vuetify/src'
    ],
    use: [
        {
            loader: 'babel-loader',
            options: Config.babel()
        }
    ]
}

- CodeXP

---

哇！我注意到它可以在自己的代码中工作，但如果在node_modules中应用对象扩展，则无法工作！ - CodeXP

终于我弄清楚了问题所在：加载器中的排除选项阻止Babel编译node_modules中的代码！就是这么简单，花了半天时间来解决这个问题。 - CodeXP

Answer 2

调用 {...store.getState()} 而不是 todos={...store.getState()}

- Paulos3000