如何修复模块解析失败：意外的令牌？

Question

当我运行时，npm run build我收到此错误：

\n\n

ERROR in ./src/client.js 7:2\nModule parse failed: Unexpected token (7:2)\nFile was processed with these loaders:\n * ./node_modules/jshint-loader/index.js\nYou may need an additional loader to handle the result of these loaders.\n| \n| const component = (\n>   <Router history={browserHistory}>\n|     {routes}\n|   </Router>\n @ multi babel-polyfill ./src/client.js main[1]\n

\n\n

./src/client.js（带有警告browserHistory-- 无法解析符号 \'browserHistory\' ）

\n\n

import React      from \'react\';\nimport ReactDOM   from \'react-dom\';\nimport { browserHistory, Router } from \'react-router\';\nimport routes from \'./routes\';\n\nconst component = (\n  <Router history={browserHistory}>\n    {routes}\n  </Router>\n);\n\nReactDOM.render(component, document.getElementById(\'react-view\'));\n

\n\n

我该如何修复它？

\n\n

\n

反应：16.13.0

\n\n

网络包：4.42.0

\n\n

npm：6.14.2

\n

\n\n

webpack-config.js

\n\n

ERROR in ./src/client.js 7:2\nModule parse failed: Unexpected token (7:2)\nFile was processed with these loaders:\n * ./node_modules/jshint-loader/index.js\nYou may need an additional loader to handle the result of these loaders.\n| \n| const component = (\n>   <Router history={browserHistory}>\n|     {routes}\n|   </Router>\n @ multi babel-polyfill ./src/client.js main[1]\n

\n

Answer 1

您的 webpack 配置不处理 React 的 JSX 语法。您需要使用一些加载器更新它才能正常工作（这是一个教程： https: //www.valentinog.com/blog/babel/）

我建议您首先使用 create-react-app ，它将所有这些配置抽象出来： https: //github.com/facebook/create-react-app。以这种方式开始反应要容易得多，并且您可以在准备好/如果需要时对其进行自定义。