使用 static-render-webpack-plugin 的 React-router 问题答案

【问题标题】：React-router issues using static-render-webpack-plugin使用 static-render-webpack-plugin 的 React-router 问题
【发布时间】：2016-06-20 11:01:56
【问题描述】：

我上周刚开始使用 React，但在关注 a tutorial 以获取 static-render-webpack-plugin 时遇到了问题。

如果您想仔细查看，我已输入代码online at GitHub。

在按照教程进行一些更改后（我添加了 babel-core，我将 js 加载器更改为 babel-loader 并且入口点 url 需要进行小修正），当我尝试运行 webpack -p 生成静态文件我收到以下错误：

ERROR in ./src/entry.js
Module build failed: SyntaxError: .../src/entry.js: Unexpected token (10:2)
   8 |
   9 | const routes = (
> 10 |   <Route path="/" handler={RootPage}>
     |   ^

我认为这可能与the changes made with the latest version of react-router 有关。我使用的是最新版本，但本教程的语法看起来可能是在 v.1.0 之前编写的。例如，我认为教程中提到将其添加到src/entry.js 文件的部分：

if (typeof document != 'undefined') {
  Router.run(routes, path, (Root) => {
    React.render(<Root/>, document);
  });
}

可能需要重写成这样的东西（但我不确定这是否完全正确）：

if (typeof document != 'undefined') {
  ReactDOM.render(routes, document);
}

显然还有更多的事情发生，因为当我尝试重写 sn-p 然后运行 webpack-dev-server 时收到相同的错误消息 - 这是它应该命中该代码的唯一时间。（是的，我在页面顶部添加了import ReactDOM from 'react-dom';，在package.json 中添加了"react-dom": "^0.14.7",。）

我确信这部分（也在 src/entry.js 上）也需要重写以匹配最新的 react-router，但我不确定如何：

export default function(path, props, callback) {
  Router.run(routes, path, (Root) => {
    const html = React.renderToString(<Root/>);
    callback('<!doctype html>' + html);
  });
}

提前感谢您提供的任何帮助或提示。

【问题讨论】：

我遇到了类似的问题。自从您发布此内容以来已经有几个星期了。运气好的话？！ ??????
@Ivanoats 抱歉，我无法让它工作。我认为也许尝试使用 "react-router": "1.0.3" 而不是 2.0 版本的教程可能是一个起点，但是在不知道所有依赖项的版本的情况下，会涉及很多猜测。我真的希望插件链接到一个工作演示和回购。我一直在研究 metalsmith.io 作为替代方案。
谢谢 - 是的，在这两点上。存储库应该有一个超出测试的工作示例，而且 Metalsmith 也是我的备份。
@Ivanoats 如果您仍在寻找替代解决方案，这看起来像是赢家：github.com/gatsbyjs/gatsby

标签： reactjs webpack react-router

【解决方案1】：

由于 Webpack 不知道如何将 JSX 转换为 ES5，因此您的代码正在中断。你已经在 webpack 配置中指定 babel-loader 作为 JS 文件的加载器，但不幸的是，Babel 6 并没有做任何开箱即用的事情，你需要包含包含将不同语法编译到 ES5 的规则的“插件”。在这种情况下，您将希望 es2015 预设支持所有 ES6 语法，并希望 react 预设支持 JSX。您还缺少尝试导入 webpack 配置的 extract-text-webpack-plugin。通过 NPM 解决这些问题：

npm i -D babel-preset-2015 babel-preset-react extract-text-webpack-plugin

然后，在 js/jsx 文件的加载器部分中将预设添加到 webpack.config.js 文件中：

{                                                                                                                                                                                         
  test: /\.(js|jsx)?$/,                                                                                                                                                                                   
  loader: 'babel',                                                                                                                                                                            
  exclude: /node_modules/,                                                                                                                                                                           
  query: {                                                                                                                                                                                           
    presets: ['es2015', 'react']                                                                                                                                                          
  }                                                                                                                                                                                                  
}

我分叉了您的存储库并进行了这些更改，并且能够在编译过程中走得更远。似乎您仍需要解决特定于您的项目的模块依赖项。

【讨论】：

感谢您的帮助！我很欣赏这个解释。我已经进行了更改，并且不再收到相同的错误消息！这是一个改进。我现在必须弄清楚为什么它说ERROR in NotFoundRoute is not defined。我尝试完全删除 404 页面，但随后收到了一系列 ERROR in render is not a function 消息。在谷歌搜索之后，我想我可能会回到 React 和 react-router 的升级问题。
这一切都推到了回购吗？我很乐意稍后再看一下代码。
是的，它就在那里。非常感谢！
@JackieJohnston NotFoundRoute 错误很可能是因为您使用的是较新版本的 react-router。 NotFoundRoute 不再是有效路径。相反，使用作为最后一个路由。这条路线因为星号而“抓住”了一切，基本上是新的 NotFoundRoute。
@Qiming 谢谢，确实消除了该错误消息。现在它抱怨“渲染中的错误不是函数”。它连续吐出 4 个这样的错误，毫无疑问，它针对它尝试呈现的每个页面都有一个。