Migrating from Webpack v4 to v5. Styling not picked up

Issue

I've migrated Webpack to v5 in my React project and none of my .scss files are picked up when I run it

I've followed this guide on migrating webpack https://webpack.js.org/migrate/5/ updated all plugins and loaders (all of them are MAJOR updates) that I use in development mode, updated configuration file to accommodate new versions but none of the styles are applied

My package.json:

  "devDependencies": {
    ...
    "clean-webpack-plugin": "^4.0.0",
    "compression-webpack-plugin": "^10.0.0",
    "copy-webpack-plugin": "^11.0.0",
    "css-loader": "^6.7.1",
    ...
    "file-loader": "^6.2.0",
    "fork-ts-checker-webpack-plugin": "^6.2.6",
    "html-webpack-plugin": "^5.5.0",
    ...
    "mini-css-extract-plugin": "^2.6.1",
    ...
    "node-sass": "^4.14.1",
    "optimize-css-assets-webpack-plugin": "^6.0.1",
    "react-hot-loader": "^4.13.0",
    "sass-loader": "^13.1.0",
    "style-loader": "^3.3.1",
    "terser-webpack-plugin": "^5.3.6",
    "ts-loader": "^9.4.1",
    "webpack": "^5.74.0",
    "webpack-bundle-analyzer": "^4.6.1",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.11.1"
  }
  "sideEffects": [
    "*.css",
    "*.scss"
  ]
}

My webpack.config.json:

module.exports = {
  mode: 'development',
  entry: './src/index.tsx',
  output: {
    publicPath: '/',
    path: outPath,
    filename: 'bundle.js',
    globalObject: 'this'
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        exclude: [
          /(node_modules)/,
          /\.test.tsx?$/,
          /\.spec.tsx?$/
        ],
        use: [
          {loader: 'react-hot-loader/webpack'},
          {
            loader: 'ts-loader',
            options: {
              transpileOnly: true,
              allowTsInNodeModules: false,
              onlyCompileBundledFiles: true
            }
          }
        ]
      },
      {
        test: /\.(css|scss)$/,
        use: [
          {loader: 'style-loader'},
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              modules: {
                localIdentName: '[name]__[local]___[hash:base64:5]',
              },
            },
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true,
            },
          }
        ]
      }
    ]
  }
};

This is how I import styles in my modules:

const styles = require('./index.scss')

<div className={styles['some-class']}>

When I was on previous webpack version everything worked fine, but as soon as I upgraded webpack and all the webpack related packages, styling is no longer applied.

Any help is highly appreciated

Solution

Since you're using require and not import, you have to specify default:

const styles = require('./index.scss').default;

Answered By - Arkellys