Reactjs 迁移到Webpack 2后，gulp或Webpack流会导致Webpack构建失败

迁移到Webpack 2后，使用gulp运行Webpack时，似乎会导致babel或Webpack抛出错误（无法判断错误的来源）。使用下面的配置和结构运行

webpack

成功构建，但通过gulp和webpack流进行管道传输会导致此错误：

Message:
    ./app/app.jsx
Module parse failed: /Users/schne482/Code/tralgo/app/app.jsx Unexpected token (11:1)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (11:1)
    at Parser.pp$4.raise (/Users/schne482/Code/tralgo/node_modules/webpack-stream/node_modules/acorn/dist/acorn.js:2221:15)
    at Parser.pp.unexpected (/Users/schne482/Code/tralgo/node_modules/webpack-stream/node_modules/acorn/dist/acorn.js:603:10)
    at Parser.pp$3.parseExprAtom (/Users/schne482/Code/tralgo/node_modules/webpack-stream/node_modules/acorn/dist/acorn.js:1822:12)
    at Parser.pp$3.parseExprSubscripts (/Users/schne482/Code/tralgo/node_modules/webpack-stream/node_modules/acorn/dist/acorn.js:1715:21)
    at Parser.pp$3.parseMaybeUnary (/Users/schne482/Code/tralgo/node_modules/webpack-stream/node_modules/acorn/dist/acorn.js:1692:19)
    at Parser.pp$3.parseExprOps (/Users/schne482/Code/tralgo/node_modules/webpack-stream/node_modules/acorn/dist/acorn.js:1637:21)
    at Parser.pp$3.parseMaybeConditional (/Users/schne482/Code/tralgo/node_modules/webpack-stream/node_modules/acorn/dist/acorn.js:1620:21)
    at Parser.pp$3.parseMaybeAssign (/Users/schne482/Code/tralgo/node_modules/webpack-stream/node_modules/acorn/dist/acorn.js:1597:21)
    at Parser.pp$3.parseParenAndDistinguishExpression (/Users/schne482/Code/tralgo/node_modules/webpack-stream/node_modules/acorn/dist/acorn.js:1861:32)
    at Parser.pp$3.parseExprAtom (/Users/schne482/Code/tralgo/node_modules/webpack-stream/node_modules/acorn/dist/acorn.js:1796:19)
Details:
    domain: [object Object]
    domainThrown: true

我所做的：

• 将

  webpack.config.js的结构更改为遵从webpack 2

• 将babel配置移动到单独的

  。babelrc

  。没有明显的效果
• 确保

  .babelrc

  具有正确的结构
• 确保网页包指向正确的输入文件（

  /app/app.jsx

  ），并且输入文件由加载程序处理
• 运行babel（

  babel./app/app.jsx

  ）时没有使用相同的

  .babelrc

  和依赖项的网页。输出正确，没有错误
• 未吞咽地运行webpack，输出正确
• 更新相关软件包（巴别塔核心、巴别塔加载器、巴别塔预设、网页包流、gulp等）
• 检查是否存在任何简单语法错误

以下是相关文件：

gulpfile.js

：

/app/app.jsx

：

/.babelrc

：

/package.json

（相关依赖项）：

---

目前不是在PC上，因此无法测试此功能，但您可以尝试：

将导入更改为：

import ReactDOM from 'react-dom'

然后将“渲染”更改为：

ReactDOM.render (
   ...
)

你有没有试着补充

 "plugins": ["transform-object-rest-spread", "babel-plugin-transform-react-jsx"]

---

到你的.babelrc文件？

我遇到了与你相同的问题…@Chris不幸的是，这让我稍微放松了一些，我们会解决这个问题的！我将尝试更多的东西，我将更新帖子。没有任何改变，也不应该改变。如果是这种情况，那么这将是一个错误，因为这是有效的ES6代码。不确定您是否已经修复了它，只是尝试用上面的配置重新创建，它构建得很好，您运行的是哪个命令生成错误？通过gulp运行它似乎就是这样做的。我也做了同样的事情，它为我构建了一个很好的网页。我会在有机会的时候更新它，它肯定是gulp或webpack流。似乎错误是关于使用不合适的加载程序解析JSX模块，或者按照错误日志第3行和第4行中的说明在没有加载程序的情况下解析它。如上所述更改导入似乎与上述日志中的错误无关。

{
  "presets": [
    "es2015",
    "react"
  ]
}

{
  "devDependencies": {
    "babel-core": "^6.22.1",
    "babel-loader": "^6.3.2",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.22.0",
    "webpack": "^2.2.1",
  }
}

import ReactDOM from 'react-dom'

ReactDOM.render (
   ...
)

 "plugins": ["transform-object-rest-spread", "babel-plugin-transform-react-jsx"]