Webpack babel es6 给我 react-router 1.0“找不到模块”的错误?

Posted

技术标签:

【中文标题】Webpack babel es6 给我 react-router 1.0“找不到模块”的错误?【英文标题】:Webpack babel es6 giving me errors with react-router 1.0 "module not found"? 【发布时间】:2016-03-02 22:25:42 【问题描述】:

我在使用 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”语法时一切正常,但是当我将“babel-es2015-preset”添加到我的 webpack 并想开始切换到 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 导入语法。如果有更好的加载器集或者我的 webpack 配置错误,请指教!

我的 App.js 中仅有的几行是:

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

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

【问题讨论】:

【参考方案1】:

我假设您使用的是 npm 3+。 React Router 的安装文档状态:

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

运行npm install history,你应该会很好。

【讨论】:

【参考方案2】:

错误告诉你问题所在:

无法解析模块“history/lib/createHashHistory”

react-router 依赖于 history 模块 here 并且您似乎没有安装它。

可能最容易

rm -rf node_modules
npm install

以确保正确安装所有依赖项。

【讨论】:

historyreact-router 的依赖项。不导入就不会报错。 我已经安装了历史但是这个错误一直出现。我现在想不通了。对于这个问题,您还有其他提示吗? 当我使用最新版本的历史(4.5.1)时发生了这种情况。我通过降级版本修复为 3.2.1。我正在使用 react-router 3.0.2 版【参考方案3】:

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

【讨论】:

以上是关于Webpack babel es6 给我 react-router 1.0“找不到模块”的错误?的主要内容,如果未能解决你的问题,请参考以下文章

使用webpack+babel构建ES6语法运行环境

Webpack 4 学习06(使用babel编译ES6)

Webpack babel 6 ES6 装饰器

ES6转化ES5的环境设置(Babel + Webpack)

webpack+babel+ES6+react环境搭建

React + Webpack + babel7 解析 es6 样式函数赋值失败