Error: Cannot 'file' or 'directory' ./lib/React when using with webpack

Question

I have been using react since a while now and wanted to try it with webpack.

Here is my webpack.config.js :

var path = require('path');

module.exports = {
    entry: './app.js',
    output: {
        path: path.resolve(__dirname, "build"),
        publicPath: "/",
        filename: "bundle.js"
    },
    module: {
        loaders: [
            {
                test: /\.js?$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['react', 'es2015']
                }
            }
        ]
    },
    resolve: {
        extensions: ['', 'js', 'jsx']
    }
}

The error that occurs is as follows :

ERROR in ./~/react/react.js
Module not found: Error: Cannot resolve 'file' or 'directory' ./lib/React in /Users/username/path/to/app/node_modules/react
 @ ./~/react/react.js 3:17-39

This error is occurring when I am importing react into my file by using either var React = require('react') or import React from 'react';

I have the required preset packages for babel installed :

  "devDependencies": {
    "babel-core": "^6.4.0",
    "babel-loader": "^6.2.1",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "webpack": "^1.12.10",
    "webpack-dev-server": "^1.14.0"
  },
  "dependencies": {
    "highcharts-release": "^4.2.1",
    "immutable": "^3.7.6",
    "react": "^0.14.5",
    "react-highcharts": "^6.0.0",
    "react-redux": "^4.0.6",
    "redux": "^3.0.5"
  }

Thanks!

Answer 1

Based on your pastebin example, you can see that webpack is looking for React, Reactjs, or Reactjsx, not React.js:

/Users/bIgB/Private/Code/go-projects/src/github.com/bIgBV/cereberus/app/node_modules/react/lib/React doesn't exist
  /Users/bIgB/Private/Code/go-projects/src/github.com/bIgBV/cereberus/app/node_modules/react/lib/Reactjs doesn't exist
  /Users/bIgB/Private/Code/go-projects/src/github.com/bIgBV/cereberus/app/node_modules/react/lib/Reactjsx doesn't exist

To fix this, simply add a . to the front of your extensions, like so:

resolve: {
    extensions: ['', '.js', '.jsx']
}

https://webpack.github.io/docs/configuration.html#resolve-extensions