Importing react with webpack Error: Cannot resolve module 'react'

Question

I'm getting an error Error: Cannot resolve module 'react' (and react-dom) with webpack. This has to be the hardest project setup I've had to deal with and I'm really not sure why its not working. I've also checked for similar issues on so, and can't seem to find a solution.

webpack.config.js

module.exports = {
  entry: './static/js/base/base.jsx',
  output: {
    path: __dirname + '/static/scripts',
    filename: 'bundle.js'
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel',
        exclude: /node_modules/,
        query: {
          cacheDirectory: true,
          presets: ['react', 'es2015']
        }
      }
    ]
  }
}

base.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class Navigation extends React.Component {
  // ...
  constructor(props) {
    super(props);

    [
      // Functions & Event Handlers declaration
    ].forEach(method => { this[method] = this[method].bind(this); });

    this.state = {
      hello: 'Hello World!',
    };
  }

  render() {
    return (
      <div>
        <div href="#" class="header item">
          WINPMP Login
        </div>
        <div class="right menu">
          <a class="ui primary button item">Students</a>
          <a class="ui button item">Teachers</a>
        </div>
      </div>
    );
  }
}

React.render(<Navigation/>, document.getElementById('nav'));

I've run npm install, everything is there. Why won't it import properly? How can I make this work?

And my package.json

 "devDependencies": {
    "babel": "^6.5.2",
    "babel-core": "^6.11.4",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.11.1",
    "bower": "^1.7.9",
    "react": "^15.2.1",
    "react-dom": "^15.2.1",
    "webpack": "^1.13.1",
    "webpack-dev-server": "^1.14.1"
  }

On a side note, this is why the React team have created a tool to help with all this initial setup. They blogged about it here: facebook.github.io/react/blog/2016/07/22/… ; you could always set up a project with it and then eject the auto-config part of it, and compare their config with your own. (facebook.github.io/react/blog/2016/07/22/…) — John
– John, Commented Jul 28, 2016 at 23:08

John · Accepted Answer · 2016-07-29 00:04:36Z

1

Try creating a .babelrc file in your project root which looks like this:

{
  presets: [
    "es2015", "react"
  ]
}

and pull out the 'query' field from your webpack config 'loader'

answered Jul 29, 2016 at 0:04

John

2,8942 gold badges22 silver badges25 bronze badges

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

3 Comments

Modelesq Over a year ago

Module not found: Error: Cannot resolve module 'sockjs-client'

John Over a year ago

Hmm.. that's odd.. I haven't heard of that one but apparently it's used by webpack-dev-server; not really sure why it wouldn't be found.. maybe reinstall webpack-dev-server? or delete node_modules and re-run npm i ?

Modelesq Over a year ago

hmmm yeah that didn't seem to cut it. i will however mark your answer as correct since it did help my progression. so thank you :D

Collectives™ on Stack Overflow

Importing react with webpack Error: Cannot resolve module 'react'

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related