Как исправить ошибку «Module build failed» для module scss в React Ts проекте?

Question

[Анна]

Полная ошибка

Compiled with problems:

ERROR in ./src/styles/Header.module.scss

Module build failed (from ./node_modules/style-loader/dist/cjs.js):
ValidationError: Invalid options object. Style Loader has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'modules'. These properties are valid:
   object { injectType?, attributes?, insert?, base?, esModule?, styleTagTransform? }
    at validate (C:\project\node_modules\schema-utils\dist\validate.js:105:11)
    at Object.getOptions (C:\project\node_modules\webpack\lib\NormalModule.js:587:19)
    at Object.loader (C:\project\node_modules\style-loader\dist\index.js:19:24)

package.json

"sass": "1.59.3",
"sass-loader": "12.6.0",
"css-loader": "6.7.1",
"style-loader": "3.3.1",
"typed-scss-modules": "6.5.0",
"typescript": "5.0.2",
"typescript-plugin-css-modules": "4.2.2"

webpack.config.js

{
                test: /\.s[ac]ss$/i,
                use: [
                    {
                        loader: 'style-loader',
                        options: {
                            sourceMap: true,
                            modules: true
                        }
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true,
                            modules: true
                        }
                    },
                    {
                        loader: 'sass-loader',
                            options: {
                                sourceMap: true,
                                modules: true
                            }
                    },
                    {
                        loader: "postcss-loader",
                        options: {
                          postcssOptions: {
                            parser: "postcss-js",
                          },
                          execute: true,
                        },
                    },
                ]
            },

tsconfig.json

"plugins": [
       {
           "name": "typed-scss-modules"
       }
    ],

еще в корень проекта добавила файл declaration.d.ts

declare module '*.scss' {
    const content: Record<string, string>;
    export default content;
}

Делала все по гайду, но все равно module.scss не работает

Answer 1

[5465]

Ошибка "Module build failed" означает, что Webpack не смог скомпилировать ваш модуль SCSS в CSS. В этой конкретной ошибке проблема заключается в том, что свойство 'modules' указано в конфигурации загрузчика 'style-loader', но оно не поддерживается.

Чтобы исправить эту ошибку, вам нужно удалить свойство 'modules' из конфигурации загрузчика 'style-loader'. Также вам не нужно указывать свойство 'modules' для загрузчиков 'css-loader' и 'sass-loader', потому что вы уже используете плагин 'typed-scss-modules' для генерации типизированных модулей SCSS.

Измените ваш конфигурационный файл webpack.config.js следующим образом:

{
  test: /\.s[ac]ss$/i,
  use: [
    {
      loader: 'style-loader',
      options: {
        sourceMap: true,
      },
    },
    {
      loader: 'css-loader',
      options: {
        sourceMap: true,
        modules: {
          exportLocalsConvention: 'camelCase',
        },
      },
    },
    {
      loader: 'sass-loader',
      options: {
        sourceMap: true,
      },
    },
    {
      loader: 'postcss-loader',
      options: {
        postcssOptions: {
          parser: 'postcss-js',
        },
        execute: true,
      },
    },
  ],
},

Вы также можете изменить свойство 'exportLocalsConvention' на 'asIs', если вы хотите сохранить имена классов CSS без изменений.

После этого перезапустите сборку вашего проекта и должно все заработать.