Webpack babel es6在使用react-router 1.0时出现"module not found"错误？

Question

我在使用react-router时遇到了以下错误，这些错误似乎与我的应用程序代码无关，而是与react-router库本身有关：

ERROR in ./~/react-router/lib/Router.js
Module not found: Error: Cannot resolve module 'history/lib/createHashHistory' in /Users/kmartinez/apache/www/reactroutesample/node_modules/react-router/lib
 @ ./~/react-router/lib/Router.js 25:35-75

ERROR in ./~/react-router/lib/useRoutes.js
Module not found: Error: Cannot resolve module 'history/lib/Actions' in /Users/kmartinez/apache/www/reactroutesample/node_modules/react-router/lib
 @ ./~/react-router/lib/useRoutes.js 15:25-55

ERROR in ./~/react-router/lib/useRoutes.js
Module not found: Error: Cannot resolve module 'history/lib/useQueries' in /Users/kmartinez/apache/www/reactroutesample/node_modules/react-router/lib
 @ ./~/react-router/lib/useRoutes.js 17:28-61

ERROR in ./~/react-router/lib/match.js
Module not found: Error: Cannot resolve module 'history/lib/createMemoryHistory' in /Users/kmartinez/apache/www/reactroutesample/node_modules/react-router/lib
 @ ./~/react-router/lib/match.js 13:37-79

ERROR in ./~/react-router/lib/match.js
Module not found: Error: Cannot resolve module 'history/lib/useBasename' in /Users/kmartinez/apache/www/reactroutesample/node_modules/react-router/lib
 @ ./~/react-router/lib/match.js 17:29-63

当我使用“JSX”语法时，一切正常，但是当我在我的webpack中添加了“babel-es2015-preset”并想要开始切换到ES6 / ES2015时，我遇到了上述错误。这是怎么回事？

module.exports = {
    entry: './app/App.js',
    output: {
        filename: 'public/bundle.js',
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel',
                query: {
                    presets: ['es2015','react']
                }

            }
        ]
    }
}

我正在使用最新版本的react-router、react和babel。package.json文件包含以下内容：

    "babel-core": "^6.2.1",
    "babel-loader": "^6.2.0",
    "babel-preset-es2015": "^6.1.18",
    "react-dom": "^0.14.3",
    "webpack": "^1.12.9",
"react": "^0.14.3",
    "react-dom": "^0.14.3",
    "react-router": "^1.0.0",
"babel-preset-react": "^6.1.18",

我目前的代码在某些文件中使用JSX语法，在其他文件中使用ES6 / ES2015 import语法。如果有更好的加载器或者我配置webpack出了问题，请提供建议！

我的App.js中唯一的几行是：

import React from 'react';
import ReactDOM from 'react-dom';
import {Router, Route} from 'react-router';

如果我注释掉第三行，那么先前提到的错误就会消失，但是我需要使用react-router！

- Rolando

Answer 1

我假设您正在使用npm 3+。React Router的安装文档中注明：

请注意，您还需要安装history软件包，因为它是React Router的对等依赖项，在npm 3+中不会自动安装。

运行npm install history，然后就可以了。

- enjoylife

Answer 2

错误提示告诉你问题所在：

无法解析模块 'history/lib/createHashHistory'

react-router 依赖于 这里 的 history 模块，看起来你没有安装它。

可能最简单的方法是

rm -rf node_modules
npm install

确保所有依赖项都已正确安装。

- loganfsmyth

---

history 是 react-router 的一个依赖项。如果您不导入它，它将不会抛出错误。 - loganfsmyth

我已经安装了history，但是这个错误一直出现。我现在已经没有任何想法了。你有关于这个问题的其他提示吗？ - The Lazy Log

当我使用最新的 history 版本（4.5.1）时出现了问题。我通过将版本降级为 3.2.1 来解决问题。我正在使用 react-router 版本 3.0.2。 - wut-excel

Answer 3

这是一个节点错误。通过进入 project/node_modules/react-router/ 并运行 npm install history 已经修复了它。

- R.Shah