Почему не работают css-modules?

Question

[Илья Бондаренко]

Пробую с нуля собрать сборку, застопорился на подключении css-modules (Хотя выглядит всё предельно просто). Какая-то анамалия.

Файл webpack.config.js:

const path = require('path');

module.exports = {
  mode: "development",
  entry: path.resolve(__dirname, 'src/index.tsx'),
  module: {
    rules: [
      {
        test: /\.module.css$/,
        use: [
          'style-loader',
          { 
            loader: "css-loader",
            options: {
              modules: true,
            },
          },
        ]
      },
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  }
}

Файл App.tsx::

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

export const App = () => {
  return (
    <div className={styles.block}>hello</div>
  )
}

Файл styles.module.css:

.block {
  background-color: red;
}

Сборка происходит но при инициализации приложения вылезает такая ошибка в консоли:


При этом в сгенереном бандле есть эти стили, идентификатор styles оказывается undefined при инициализации:


Всё перечитал, правда. Второй раз с нуля попробовал настроить сборку, та же ошибка. Подскажите, что упускаю?

upd. Прочитал этот вопрос и ответ на него, проблема та же самая

Answer 1

[Илья Бондаренко]

Как оказалось это поведение - следствие изменений в css-loader с версии 7.0.0. Несколько дней искал решение через поисковик яндекса, попробовав найти ту же проблему в гугле я сразу нашел ответ :(

Ссылка на changelog и то, как это предлагает поправить авторы: https://github.com/webpack-contrib/css-loader/blob...