Module not found: Error: Cannot resolve module 'routes'

Question

I'm following Cory House's pluralsight course on building React in ES6. Unfortunately I'm stuck on one of the first couple steps, setting up the basic components.

In the console I see the following error message:

Warning: [react-router] Location "/" did not match any routes

If I look in my dev server I see the following

ERROR in ./src/index.js

Warning: [react-router] Location "/" did not match any routes

Then below that I see that eslint has kicked out the following error:

C:\\Projects\\es6react\\src\\index.js (1/0)

✖ 5:9 routes not found in './routes' import/named

So this should be pretty straightforward. However, looking at my directory structure, index.js file and routes.js nothing stands out... even after about 30 minutes.

index.js

import 'babel-polyfill';
import React from 'react';
import {render} from 'react-dom';
import {Router, browserHistory} from 'react-router';
import {routes} from './routes';
import './styles/styles.css';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

render(
    <Router history={browserHistory} routes={routes} />,
    document.getElementById('app')
);

routes.js

import React from 'react';
import {Route,IndexRoute} from 'react-router';
import App from './components/App';
import HomePage from './components/home/HomePage';
import AboutPage from './components/about/AboutPage';

export default(
    <Route path="/" component={App}>
        <IndexRoute component={HomePage} />
        <Route path="about" component={AboutPage}/>
    </Route>
);

Directory structure

And just in case my scripts section from my package.json :

  "scripts": {
    "prestart": "babel-node tools/startMessage.js",
    "start": "npm-run-all --parallel open:src lint:watch test:watch",
    "open:src":"babel-node tools/srcServer.js",
    "lint": "node_modules/.bin/esw webpack.config.* src tools",
    "lint:watch": "npm run lint -- --watch",
    "test":"mocha --reporter progress tools/testSetup.js \"src/**/*.test.js\"",
    "test:watch": "npm run test -- --watch"
  },

Answer 1

You are using default export, you need to import it as default (without curly braces):

import routes from './routes';

On the other hand you can use named export and import it by name:

// index.js
export const routes = ...

// routes.js
import {routes} from './routes';

Answer 2

Because you are doing default export from routes.js file not named export, and importing it as named export.

Use this:

import routes from './routes';     //remove {}

Answer 3

You have used 'export default' in routes.js, this means that to import it you need to use:

import routes from "./routes";

In your code you have used {routes} which would import when exported without the default.