-1

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()
    ]
};
1
  • install the package react-css-modules using npm i react-css-modules --save Commented May 2, 2018 at 10:18

1 Answer 1

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.

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.