Webpack babel es6 gives me errors with react router 1.0 "module not found"?

Question

I get the following errors with response-router, the errors it refers to look like it's outside my application code, but with the response-router library itself:

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 

Everything worked when I used the "JSX" syntax, but as soon as I added "babel-es2015-preset" to my web package and wanted to start the transition to ES6 / ES2015, I got the errors above. What gives?

 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'] } } ] } } 

I am using the latest version of reaction router, reaction and babel. Package.json contains the following:

  "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", 

My current code contains both JSX syntax in some files and ES6 / ES2015 import syntax in others. If there is a better set of downloaders or if I have configured the web package incorrectly, please let us know!

In my App.js application, there are only the following lines:

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

If I comment on this third line, the errors mentioned will disappear, but I need to use a "react router"!

Answer 1

I assume you are using npm 3+. And React Router will install the docs:

Please note that you also need to install the history package, as it is an equal dependency of the React Router and will not be automatically installed for you in npm 3+.

Run npm install history and you should be good.

Answer 2

Errors inform you about the problem:

Unable to allow module history / lib / createHashHistory '

react-router dependent on the history module here and it seems you don't have one.

Potentially the easiest

 rm -rf node_modules npm install 

to ensure that all your dependencies are installed correctly.

Answer 3

This is a node error. This has been fixed by going to project/node_modules/react-router/ and running npm install history .