React Router Cannot resolve module

Question

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 <[email protected]>",
  "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.

I see you've edited you question, did my suggestion solve the error message you were receiving? — Pineda
– Pineda, Commented Nov 21, 2016 at 22:58

Pineda · Accepted Answer · 2016-11-21 22:56:59Z

10

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.

edited Nov 21, 2016 at 22:56

answered Nov 21, 2016 at 22:52

Pineda

7,5933 gold badges34 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user3622460 Over a year ago

Ah! Nice catch. Fixed but still getting an error about getCurrentLocation not being caught, but you fixed me posting problem. THANK YOU =)

Pineda Over a year ago

Glad I could help. It's always worth checking if the error makes sense first :).

Yogesh Borad · Accepted Answer · 2018-03-29 06:53:23Z

8

The Error is:

Module not found: Can't resolve 'react-router' in 'E:\Redux\media-library\src'.

Solution is:

Run the below command in your directory.

$ npm install --save react-router-dom

answered Mar 29, 2018 at 6:53

Yogesh Borad

4,7251 gold badge20 silver badges18 bronze badges

Comments

German Attanasio · Accepted Answer · 2018-05-31 21:15:30Z

8

I had a similar issue migrating from react-router 3.x to 4.x

I fixed the issue by installing two missing dependencies that are added in 4.x

npm install react-router-dom
npm install react-router-config

See the react-router CHANGELOG.

answered May 31, 2018 at 21:15

German Attanasio

23.9k7 gold badges51 silver badges65 bronze badges

1 Comment

Shehan Jayalath Over a year ago

"react-router-dom": "^5.2.0", Changed to "react-router-config": "^5.1.1", "react-router-dom": "^5.2.1",

André · Accepted Answer · 2023-04-16 17:40:38Z

0

fixed the issue by installing the missing dependencies:

npm i react-router-dom

npm i react-router-config

npm i --save react-router-dom

edited Apr 16, 2023 at 17:40

André

2,06810 gold badges20 silver badges39 bronze badges

answered Apr 12, 2023 at 12:35

mynk patel

11 bronze badge

Comments

President Jam · Accepted Answer · 2023-10-25 15:07:49Z

0

First, uninstall reach router, then

Install npm install @reach/router

Import import { Router, Link } from "@reach/router"

Use

<Router>
    <Home path="/" />
</Router>

See the official site https://reach.tech/router/

answered Oct 25, 2023 at 15:07

President Jam

1,3181 gold badge6 silver badges22 bronze badges

Collectives™ on Stack Overflow

React Router Cannot resolve module

5 Answers 5

2 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related