user3622460 user3622460 - 16 days ago 9
Javascript Question

React Router Cannot resolve module

Getting this error...

EDIT routes.js to reflect changes


ERROR in ./app/config/routes.js
Module not found: Error: Cannot resolve module 'react-rounter' in /Users/sam/Desktop/battle/app/config
@ ./app/config/routes.js 2:19-43


I have webpack and react - react-dom - react-router - babel, etc all installed into my npm packages. When I run npm start I get the above error. Here are my package.json / webpack config / router.js files

package.json

{
"name": "battle",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"production": "webpack -p",
"start": "webpack-dev-server"
},
"author": "Sam Schaefer <smmschaefer@gmail.com>",
"license": "ISC",
"dependencies": {
"react": "^15.4.0",
"react-dom": "^15.4.0",
"react-router": "^3.0.0"
},
"devDependencies": {
"babel-core": "^6.18.2",
"babel-loader": "^6.2.8",
"babel-preset-react": "^6.16.0",
"html-webpack-plugin": "^2.24.1",
"webpack": "^1.13.3",
"webpack-dev-server": "^1.16.2"
}
}


webpack.config

var HtmlWebpackPlugin = require('html-webpack-plugin')
var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
template: __dirname + '/app/index.html',
filename: 'index.html',
inject: 'body'
});

module.exports = {
entry: [
'./app/index.js'
],
output: {
path: __dirname + '/dist',
filename: "index_bundle.js"
},
module: {
loaders: [
{test: /\.js$/, exclude: /node_modules/, loader: "babel-loader"}
]
},
plugins: [HTMLWebpackPluginConfig]
};


routes.js

var React = require('react');
var ReactRouter = require('react-router');
var Router = ReactRouter.Router;
var Route = ReactRouter.Route;
var IndexRoute = ReactRouter.IndexRoute;
var Main = require('../components/Main');
var Home = require('../components/Home');


var routes = (
<Router>
<Route path='/' component={Main}>
<Route path='/home' component={Home} />
</Route>
</Router>
);


module.exports = routes;


thanks for any help

Answer

The error points to issue:

ERROR in ./app/config/routes.js Module not found: Error: Cannot resolve module 'react-rounter' in /Users/sam/Desktop/battle/app/config @ ./app/config/routes.js 2:19-43

In your routes.js file:

react-rounter
         ^--- this is probasbly the issue.

Shouldn't that be 'react-router'? Correct the typo in your routes.js file and you should be good to go.