Проблема во время установки сборника рассказов «Не удается найти модуль ‘css-loader / lib / getLocalIdent'» в NextJS

#reactjs #next.js #css-loader

#reactjs #next.js #css-loader

Вопрос:

Я столкнулся с проблемой при создании своего проекта после настройки сборника рассказов. Я получаю сообщение об ошибке в css-загрузчиках, что getLocalIdent отсутствует. Это точная ошибка

Ошибка

 { Error: Cannot find module 'css-loader/lib/getLocalIdent'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
    at Function.Module._load (internal/modules/cjs/loader.js:562:25)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.<anonymous> (next.config.js:9:30)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3) code: 'MODULE_NOT_FOUND' }
 

Это следующий конфигурационный файл

Next.config.js

 const withSass = require("@zeit/next-sass");
const withCss = require("@zeit/next-css");
const gNextJsAppProperties = require("./next.properties");

const env = process.env.ENV || "local";
const defaultGetLocalIdent = require("css-loader/lib/getLocalIdent");


const localIdentName =
env === "local" || env === "dev"
  ? "[name]__[local]--[hash:base64:5]"
  : "[hash:base64]";


const cssLoaderOptions = {
getLocalIdent: (loaderContext, localIdentName, localName, options) => {
  if (loaderContext.resourcePath.includes("node_modules")) {
    return localName;
  } else {
    return defaultGetLocalIdent(
      loaderContext,
      localIdentName,
      localName,
      options
    );
  }
},
localIdentName
};
module.exports = withSass(
withCss({
  cssLoaderOptions,
  distDir: "dist",
  cssModules: true
})
);

 

Это мой файл package.json с зависимостями.

Package.json

 {
  "name": "test",
  "dependencies": {
    "@zeit/next-sass": "^1.0.1",
    "next": "^9.4.4",
    "node-sass": "^4.14.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "sass": "^1.29.0"
  },
  "devDependencies": {
    "@storybook/preset-typescript": "^3.0.0",
    "@storybook/react": "^6.1.2",
    "@types/jest": "^25.2.3",
    "@types/node": "^12.12.50",
    "@types/react": "^16.9.43",
    "@types/react-dom": "^16.9.8",
    "babel-loader": "^8.2.1",
    "babel-preset-react-app": "^10.0.0",
    "body-scroll-lock": "^2.7.1",
    "copy-webpack-plugin": "^6.1.0",
    "css-loader": "^4.2.0",
    "sass-loader": "^10.1.0",
    "style-loader": "^2.0.0",
  },
  "scripts": {
    "storybook": "start-storybook -p 6006 -c .storybook"
  }
}
 

Насколько я проверил онлайн, в большинстве мест написано, что этот getLocalIdent был перемещен в css-loader, но все предложенные решения не работают для меня.

Было бы здорово, если бы кто-нибудь мог предложить исправление для этого, поскольку я понятия не имею, как это исправить.