CODEWITHSUNDEEP
javascriptcssreactjs
bizimunda
bizimunda

Reputation: 1035

CSS modules not working for react version 16.6.0

I was trying to use CSS Modules in React.

Here my code of App.js

import React from 'react';
import styles from './index.css'

const App = () => {
    const REACT_VERSION = React.version;

  return (
    <div>
      Main app
      <div style={styles.test}>Green</div>
      <div>Yellow</div>
      <div>React version: {REACT_VERSION}</div>
    </div>
  );
};

export default App;

Here is my code of index.css

.test {
  background: black;
  color: white;
  font-size: 34px;
  border: 34px;
}

Here is the output

enter image description here

I know that I have to modify

but when I read this article I could not find that code.

Upvotes: 19

Views: 50124

Answers (19)

Куванч Аннадурдыев
Куванч Аннадурдыев

Reputation: 1

{ test: /.css$/, use: [ 'style-loader', { loader: 'css-loader', options: { modules: { namedExport: false, }, }, }, ], },

Upvotes: -1

Mordred
Mordred

Reputation: 3961

I spent well over an hour trying various things to get this to work in a new app I created using the latest version create-react-app which hasn't been updated since 2022. All the answers from that time imply that it will work out of the box with CRA, but that just wasn't the case for me. I tried creating a typings.d.ts. I tried ejecting the app and editing the webpack files. I tried some other things too which I've now forgotten, but regardless of what I tried any import of:

import styles from './zone.module.css';

Gave me the following error in VSCode:

Cannot find module './zone.module.css' or its corresponding type declarations

And none of my styles would be applied.

I finally began to suspect that create-react-app might be the culprit given how out of date it was. I created a new project using vite, copied over my .ts file and my ./zone.module.css and it instantly worked.

If you're stuck like I was, give up on CRA and just switch to vite. Not only is it maintained, dumb things like this work without any effort.

Upvotes: 0

Samuel
Samuel

Reputation: 13

In the React file, the module stylesheet is imported using the import statement, and the imported styles are assigned to the style variable. The className attribute of the element is then set to style.my_class, which applies the defined CSS styles to the corresponding element.

CSS file: component_name.module.css 

    .my_class {
       background-color: red;
    }

REACT file: component_name.jsx 

    import style from "./component_name.module.css"

    const Component = () => {
       return (
           <div className={style.my_class}>
                <h1>Hello</h1>
            </div>
       )
    }

Upvotes: 0

Sri Tirupathi Raju
Sri Tirupathi Raju

Reputation: 819

This needs latest react-scripts atleast greater than 4.0.0. So run npm install --save react-scripts@latest and try which worked for me

Upvotes: 0

Reinier Garcia
Reinier Garcia

Reputation: 1770

Checked with React 17.0.1

This is what you need to do:

  1. Rename your css file, from: 'index.css' to: 'index.module.css'. It doesn't matter the notation for the naming of that css file (now as a *.module.css file). It won't make any difference if is 'myFile.module.css' or 'MyFile.module.css'. The solution is not there precisely.

  2. Import your *.module.css from your js file:

    import style from './CourseGoalList.module.css';

  3. Access to your css clases with the usual CSS Modules syntax:

    ... className={style.NameOfTheCssClass}...

  4. In the case you have css classes with dashes, you can do two things. Either remove the dashes renaming them to UpperCase or camelCase or you can access them like to a Map object (with key: value pairs). Even when you will be able to access/see those classes from your JS file (with the usual autocomplete code feature in your IDE), as camelCase classes,... they still wont work that way (with camelCase notation on your .js file and exactly as they are in the css file). It is imperative to either change the css classes name to UpperCase or camelCase (accessing with UpperCase or camelCase notation from the *.js file) or leave them as they are and then access them like if they were a Map object.

Example: You can do one of two things:

Variant A: It works perfectly

JS File:

import React from 'react';
import CourseGoalItem from '../CourseGoalItem/CourseGoalItem';
import style from './CourseGoalList.module.css';

const CourseGoalList = props => {
  return (
    <ul className={style.GoalList}>
      {props.items.map(goal => (
        <CourseGoalItem
          key={goal.id}
          id={goal.id}
          onDelete={props.onDeleteItem}
        >
          {goal.text}
        </CourseGoalItem>
      ))}
    </ul>
  );
};

export default CourseGoalList;

CSS File:

.GoalList {
  list-style: none;
  margin: 0;
  padding: 0;
}

OR:

Variant B: It works perfectly

JS File:

import React from 'react';
import CourseGoalItem from '../CourseGoalItem/CourseGoalItem';
import style from './CourseGoalList.module.css';

const CourseGoalList = props => {
  return (
    <ul className={style['goal-list']}>
      {props.items.map(goal => (
        <CourseGoalItem
          key={goal.id}
          id={goal.id}
          onDelete={props.onDeleteItem}
        >
          {goal.text}
        </CourseGoalItem>
      ))}
    </ul>
  );
};

export default CourseGoalList;

CSS File:

.goal-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

But this WONT work:

Variant C: It doesn't works (even if the css class is "visible" from your js file using a good IDE, like WebStorm for example)

JS File:

import React from 'react';
import CourseGoalItem from '../CourseGoalItem/CourseGoalItem';
import style from './CourseGoalList.module.css';

const CourseGoalList = props => {
  return (
    <ul className={style.goalList}>
      {props.items.map(goal => (
        <CourseGoalItem
          key={goal.id}
          id={goal.id}
          onDelete={props.onDeleteItem}
        >
          {goal.text}
        </CourseGoalItem>
      ))}
    </ul>
  );
};

export default CourseGoalList;

CSS File:

.goal-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

Upvotes: 3

g&#246;khan kaboğlu
g&#246;khan kaboğlu

Reputation: 61

* as fixed my problem.

import * as headerStyles from './header.module.scss'

Upvotes: 6

Hoshang Karanjekar
Hoshang Karanjekar

Reputation: 21

Adding .module in the name of css files enables the css loader in the higher version of React. Post doing this, you can simple use className={styles.classname(from css file)} in the mail file. This will apply the particular class property to that HTML element.

At the top of the file Just Import import styles from './mystyle.module.css'

It will work..

Upvotes: 1

CodeMyLife
CodeMyLife

Reputation: 11

Changing the css filename to something like "myfile.module.css" and them importing it "import styles from './myfile.module.css' solved my issue. Even though I don't know why I have to use module in my filename.

Upvotes: 0

ilhanekiz
ilhanekiz

Reputation: 11

  1. You have to create the project in this way:

    create-react-app projectname --scripts-version 1.1.5

  2. Apply:

    npm run eject

  3. CSS-loader to webpack.config.prod.js and webpack.config.dev.js files. It is necessary to add the following settings for options. Otherwise, react CSS modules structure does not work.

    {
   loader: require.resolve('css-loader'),
       options: {
          importLoaders: 1,
          modules: true,
          localIdentName:'[name]__[local]__[hash:base64:5]'
}

Upvotes: 1

Pbk243
Pbk243

Reputation: 51

It depends on the React version as you know. The recent version requires you to name CSS and sass files as follows:

[name].moudle.css or [name].moudule.scss.

If renaming files this way is not working. you should enable it manual. if you did create your project with react-create-app and didn't eject it to have access to all your config files. do as follow : 

npm run eject

it will create a config folder. inside that config file open your webpack.config files(there should be two) you have to add this in your test: /.css$/ option :

modules: true,
localIdentName: '[name]__[local]__[hash:base64:5]'

it should look like this 

 test: /\.css$/,
                    use: [
                        require.resolve('style-loader'),
                        {
                            loader: require.resolve('css-loader'),
                            options: {
                                importLoaders: 1,
                                modules: true,
                                localIdentName: '[name]__[local]__[hash:base64:5]'
                            },
                        },

do it in both webpack.config files

Note: do note tweak something else there unless you know what you are doing

Upvotes: 0

Mohammad Gharloghi
Mohammad Gharloghi

Reputation: 121

in react 16.13 and [email protected] and higher you don't need to eject your project. Your CSS files must be named camelCase + .modules.css and import to your projects like this:

import React, { Component } from 'react';
import styles from './app.module.css'; // Import css modules stylesheet as styles
class App extends Component {
  render() {
    return <button className={styles.test}>Error Button</button>;
  }
}
export default App;

and in app.module.css

.test{
  color: blue;
}

if you eject projects, in webpack.config.js file, in css modules change like this:

   test: cssRegex,
              exclude: cssModuleRegex,
              use: getStyleLoaders({
                importLoaders: 1,
                sourceMap: isEnvProduction && shouldUseSourceMap,
                modules: true,

Upvotes: 12

Nayan Thakkar
Nayan Thakkar

Reputation: 132

I think it will definitely help you out. open config/webpack.config.js and find block like this.

        {
          test: cssRegex,
          exclude: cssModuleRegex,
          use: getStyleLoaders(
            {
              importLoaders: 1,
              sourceMap: isEnvProduction && shouldUseSourceMap,
            },
            'css-loader'
          ),
         sideEffects: true,
        },

and change that like this : 

        {
          test: cssRegex,
          exclude: cssModuleRegex,
          use: getStyleLoaders({
            importLoaders: 1,
            sourceMap: isEnvProduction
                ? shouldUseSourceMap
                : isEnvDevelopment,
            modules: {
              getLocalIdent: getCSSModuleLocalIdent,
              localIdentName: '[name]__[local]__[hash:base64:5]'
            }

          }),
          sideEffects: true,
        },

Do same for cssModuleRegex block right after above block and restart your server and you'll get css modules enabled.

Upvotes: 4

Nemesius
Nemesius

Reputation: 179

The person in other question was totally right but with a little mistake, without updating the config you can do it. Just put .module in front of your name of css file like that:

myName.module.css

Then call it :

import styles from './myName.module.css'

Working on React 16.6

Upvotes: 10

Rufat Gulabli
Rufat Gulabli

Reputation: 674

Your CSS files must be named like "yourFileName.module.css". And import into your JS file like below: import yourVariableName from "./yourFileName.module.css";

Works fine on React version:

"react": "^16.9.0",
"react-dom": "^16.9.0",
"react-scripts": "3.1.0"

Upvotes: 3

Ayush Kanoongo
Ayush Kanoongo

Reputation: 31

I think this work for you.

  • My react version is 16.8.2 and after 16.2.0 you don't have config/webpack.config.dev.js or config/webpack.config.prod.js version on webpack.

  • You only have config/webpack.config.js and config/webpackDevServer.config.js files after eject operation in react app.So to resolve this issue open config/webpack.config.js file and update these changes.(See line:- 391 to 464)

            {
      test: cssRegex,
      exclude: cssModuleRegex,
      use: getStyleLoaders({
        importLoaders: 1,
        sourceMap: isEnvProduction
          ? shouldUseSourceMap
          : isEnvDevelopment,

        modules: true,
        getLocalIdent: getCSSModuleLocalIdent,
        localIdentName: '[name]__[local]__[hash:base64:5]'
      }),
      // Don't consider CSS imports dead code even if the
      // containing package claims to have no side effects.
      // Remove this when webpack adds a warning or an error for this.
      // See https://github.com/webpack/webpack/issues/6571
      sideEffects: true,
    },
    // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
    // using the extension .module.css
    {
      test: cssModuleRegex,
      use: getStyleLoaders({
        importLoaders: 1,
        sourceMap: isEnvProduction
          ? shouldUseSourceMap
          : isEnvDevelopment,
        modules: true,
        getLocalIdent: getCSSModuleLocalIdent,
        localIdentName: '[name]__[local]__[hash:base64:5]'
      }),
    },
    // Opt-in support for SASS (using .scss or .sass extensions).
    // By default we support SASS Modules with the
    // extensions .module.scss or .module.sass
    {
      test: sassRegex,
      exclude: sassModuleRegex,
      use: getStyleLoaders(
        {
          importLoaders: 2,
          sourceMap: isEnvProduction
            ? shouldUseSourceMap
            : isEnvDevelopment,
        modules: true,
        getLocalIdent: getCSSModuleLocalIdent,
        localIdentName: '[name]__[local]__[hash:base64:5]'
        },
        'sass-loader'
      ),
      // Don't consider CSS imports dead code even if the
      // containing package claims to have no side effects.
      // Remove this when webpack adds a warning or an error for this.
      // See https://github.com/webpack/webpack/issues/6571
      sideEffects: true,
    },
    // Adds support for CSS Modules, but using SASS
    // using the extension .module.scss or .module.sass
    {
      test: sassModuleRegex,
      use: getStyleLoaders(
        {
          importLoaders: 2,
          sourceMap: isEnvProduction
            ? shouldUseSourceMap
            : isEnvDevelopment,
          modules: true,
          getLocalIdent: getCSSModuleLocalIdent,
          localIdentName: '[name]__[local]__[hash:base64:5]'
        },
        'sass-loader'
      ),
    },

Upvotes: 3

ealgehdr
ealgehdr

Reputation: 43

I don't know if you found solution or not but this worked for me. I was following a tutorial to use CSS module but tutor's react version was different from mine. he had react 16.0.0, and I have 16.7.0. I don't have dev or prod version on webpack. I only have webpack.config.js. so what I did, I had a code on line 400 

{
     test: cssRegex,  // cssRegex defined above as /\.css$/; 
     exclude: cssModuleRegex,
     use: getStyleLoaders({
          importLoaders: 1,
          sourceMap: isEnvProduction && shouldUseSourceMap,

          //this is the code tutor wrote.
         //================================================
          modules: true,
          getLocalIdent: getCSSModuleLocalIdent,
          localIdentName: '[name]__[local]__[hash:base64:5]'
          //================================================


     }),
     // Don't consider CSS imports dead code even if the
     // containing package claims to have no side effects.
     // Remove this when webpack adds a warning or an error for this.
     // See https://github.com/webpack/webpack/issues/6571
     sideEffects: true,
},

I hope it helps.

Note: the only thing I wrote is what I mentioned in block, everything else was already there.

Upvotes: 2

pflevy
pflevy

Reputation: 739

I had this same problem and solved it by renaming my css file to:

myName.module.css

and also importing like this: 

import styles from './myName.module.css'

There is no need to follow the steps of updating the webpack files any more.

Upvotes: 62

Asif vora
Asif vora

Reputation: 3347

if ur using CSS class or id so no need to as a variable use import CSS.

 import React from 'react';
 import './index.css'

    const App = () => {
        const REACT_VERSION = React.version;

      return (
        <div >
          Main app
          <div className="test">Green</div>
          <div>Yellow</div>
          <div>React version: {REACT_VERSION}</div>
        </div>
      );
    };

    export default App;

or

import React from 'react';
const style ={
  background: black,
  color: white,
  fontSize: 34px,
  border: 34px
}

    const App = () => {
        const REACT_VERSION = React.version;

      return (
        <div >
          Main app
          <div style={style}>Green</div>
          <div>Yellow</div>
          <div>React version: {REACT_VERSION}</div>
        </div>
      );
    };

Upvotes: 1

Lalji Tadhani
Lalji Tadhani

Reputation: 14169

Add class instead of style like

<div className="test">Green</div>

Upvotes: 0

Related Questions