Setting up webpack for utilizing css modules

I am facing challenges while setting up my webpack configuration with css modules.

Here is a snippet from my webpack configuration:

module: {
 rules: [
   {
     test: /\.s?css$/,
     include: path.resolve(__dirname, './assets/css-master/'),
     loader: extractSass.extract({
       use: [
         // { loader: 'css-loader' },
         { loader: 'css-loader?modules&localIdentName=[name]__[local]___[hash:base64:5]' },
         { loader: 'sass-loader' },
       ],
       // use style-loader in development
       fallback: 'style-loader',
     }),
     exclude: /node_modules/,
   },
 ],
},

After defining className="test", the CSS is rendered correctly. However, when using className={cssImported.test}, it fails to work as expected.

Answer №1

After troubleshooting, I managed to resolve the issue by removing react-css-modules and updating the loader configuration. The updated configuration now appears as follows (the letter 's' has been removed from module's'):

{ loader: 'css-loader?module&localIdentName=[name]__[local]___[hash:base64:5]' },

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Does using the HTML doctype result in adding extra whitespace?

Could someone provide an explanation as to why setting a doctype of <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> and <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"> results in different rendering of the following ...

What is the best way to concentrate on necessary or incorrect fields?

In the event that users scroll down and miss some of the required fields in a lengthy form, they may not see error messages when clicking the Save button to submit the form data. Is it possible to implement an on focus method that automatically directs the ...

Executing PHP code from a list item

On one of my website pages, I have a list that functions as a delete button. However, I am interested in making it so that when a user clicks on the delete option, a php script is triggered - similar to how a submit button works. Below is the list structu ...

React router error: wrong redirect executed

In the react.js code provided below, you can see a table with the component from the table.js file. This enables viewing a table with saved data, and clicking on the button in each row generated in the table displays the new EditClient component located at ...

Having Trouble Setting Default Value in React Typescript MUI Autocomplete

I am encountering an issue with my React and Typescript code using MUI with the use of hook form. The problem arises when trying to set a default value for an Autocomplete field, resulting in the following error message: I am seeking assistance in resolvi ...

Learn how to incorporate a newly created page URL into a customized version of django-oscar

Just starting out with django-oscar and trying to set up a new view on the page. I've successfully created two pages using django-oscar dashboard, https://ibb.co/cM9r0v and added new buttons in the templates: Lib/site-packages/oscar/templates/osca ...

I found that using Enzyme's shallow().text() in React Native did not perform as I had anticipated

I'm currently exploring React Native testing using enzyme and react-native-mock. Excluded from the discussion: A customized compiler for mocha to utilize Babel features. Here is the code snippet: Block.jsx: import React from 'react'; imp ...

Having trouble with NextJs router 404 error when refreshing the page on Digital Ocean?

I am currently working with a NextJs project that has been exported as a static site and is being hosted on Digital Ocean's App platform. I am using next/router to handle routing within the application. One issue that I have encountered is when attem ...

The continuous invocation of the ngStyle background-image in Angular 4 is causing a decrease in the loading speed of the page

I'm currently working on an Angular CLI Project "@angular/cli": "^1.1.1", "@angular/compiler-cli": "^4.0.0", In order to dynamically load images from the assets folder within an ng-for loop, I am using the following line of code: [ngStyle]="{&a ...

Tips and tricks for stopping a jquery animation

I have created a hover effect for list items. When I hover over an item, it triggers an animation using the .animate() method. However, when I move my cursor away from the item, the hover animation continues until it reaches its end point. Is there a way ...

The alignment of the DIV elements is not as I had hoped

I currently have three different divs on my webpage. Two of them are background divs stacked on top of each other, while the third one contains content and is positioned within the lower background div. My issue arises when I try to make the content div co ...

Caution: The reutilization of this artificial event is causing an issue with the JSON.stringify function for performance

I have a pop-up window where I need to showcase the following JSON data. { "id": 8, "accountId": 2844, "tagName": null, "mediaType": "xx", "disguise": true, "inserted": "2020-01-31T09:48:38.763", "status": "Failed", "started": "2020-01-31T14:26:17.16", "c ...

Is Selenium Webdrive the superior choice over direct requests?

My goal is to extract verification sentences from Facebook pages using BeautifulSoup. The specific sentence I am looking for is "Verified PageFacebook confirmed this is an authentic Page for this public figure, media company or brand." I tried parsing the ...

Learn how to choose multiple rows in a table using a combination of ctrl+click and Shift+click commands within react js

I'm struggling with a problem and need some assistance. I'm trying to implement a feature where a user can highlight a table row by pressing ctrl + left click, and when they press shift + left click, it should highlight all the row data from one ...

Laravel is sending out the HTTP header text together with the payload response

My current setup involves using React and jQuery on the frontend like this: $.ajax({ url: ... method: 'POST', contentType: 'application/json', dataType: 'json', success: (response) => { ... }, error: (err) => ...

While working with Next.js version 14 and Redux version 5, an error occurred: "TypeError: store.getState

Can someone help me with this issue? https://i.stack.imgur.com/BYOdO.png I'm encountering an error and I'm not sure how to fix it. Any guidance on what I might have done wrong? Currently, I am using Next.js 14. /store/index.js import { configu ...

Struggling with problems while trying to upload images using React Native's fetch Post method?

I've encountered a problem with uploading an image from my camera roll or to my API. The current code I'm using allows me to retrieve the image data from both the camera roll and camera. However, I'm facing difficulties when trying to post t ...

The report fails to render properly due to an overflow of data

I am working on an interface that retrieves records based on client selections. The data is stored in MS-SQL and returned as a record set. If the number of records returned is less than approximately 4,600, then the data is displayed correctly using HTML T ...

Enhance your WordPress website with Elementor and choose between React or Angular

I tried searching on Google, but I couldn't find any answers... Is it possible to create a custom Elementor widget in Wordpress using React or Angular? I want to build a component that will pull data from an API and dynamically render the page. I&apo ...

Whenever I attempt to implement NavigationContainer in react native, an error always pops up

Hey there! I'm currently diving into the world of React Native and decided to start with a small project. However, I've encountered a persistent error when trying to use the NavigationContainer. Here's the error message I keep getting: error ...