react-css-module module not found

Question

I'm new in react and I'm trying to build a simple application. I try react-css-modules to style it. It doesn't work, and I don't find the solution since now tooooooo much time. I think I have hard time to understand webpack and how it works... I found this similar post, but it didn't help me (module not found). I hope somebody can help me.

I try to style in the following way, and I get a white page with several red errors. Most important, I guess: "react-css-modules doesn't exist".

I installed:

npm install style-loader --save-dev
npm install css-loader --save-dev
npm install --save css-modulesify

I cut the most of the code to make it easy to read:

the component:

import React from 'react';
import CSSModules from 'react-css-modules';
var styles = require('./header.css');

class Header extends  React.Component {enter code here
  render (){
    return (
        <div  className="header">
            <h1  styleName='mainTitle'>{this.props.info.username}</h1>
        </div>  
    );
  }
}
export default CSSModules(Header, styles);

the CSS file:

.mainTitle{
    color: #aa0;
}

the package.json:

{
  "name": "Health Prover",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node server"
  },
  "keywords": [],
  "author": "Massimo Pibiri",
  "license": "ISC",
  "dependencies": {
    "css-modulesify": "^0.22.0",
    "express": "^4.13.4",
    "i": "^0.3.4",
    "lodash": "^4.6.1",
    "react": "^0.14.7",
    "react-dom": "^0.14.7"
  },
  "devDependencies": {
    "babel-core": "^6.7.2",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "css-loader": "^0.23.1",
    "react-hot-loader": "^1.3.0",
    "style-loader": "^0.13.0",
    "webpack": "^1.12.14",
    "webpack-dev-server": "^1.14.1"
  },
  "engines": {
    "node": "5.5.0"
  }
}

the webpack file:

var webpack = require('webpack');
var path = require('path');

module.exports = {
    devtool: 'inline-source-map',
    entry: [
        'webpack-dev-server/client?http://127.0.0.1:8080/',
        'webpack/hot/only-dev-server',
        './src'
    ],
    output: {
        path: path.join(__dirname, 'public'),
        filename: 'bundle.js'
    },
    resolve: {
        modulesDirectories: ['node_modules', 'src'],
        extensions: ['', '.js']
    },
    module: {
        loaders: [
        {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loaders: ['react-hot', 'babel?presets[]=react,presets[]=es2015']
        },
        {
            test: /\.css$/,
            loaders: [
                'style?sourceMap',
                'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
            ]
        }
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin()
    ]
};

Answer 1

The first thing to check when you get module not found is if it is in fact installed. Judging by your package json, it's not.

npm i react-css-modules --save

and your good.