css loader invalid options in stylesOverlay.js

[strrranger]

Hello!
I have the same error as here #236

ERROR in ./src/styles/styles.css (./node_modules/css-loader/dist/cjs.js??ref--4-1!./node_modules/postcss-loader/src??ref--4-2!./src/styles/styles.css)
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
ValidationError: CSS Loader Invalid Options

options.modules should be boolean
options.modules should be string
options.modules should be equal to one of the allowed values
options.modules should match some schema in anyOf

    at validateOptions (C:\git\EUS-DW-DIN-DIS-DiningTool\node_modules\schema-utils\src\validateOptions.js:32:11)
    at Object.loader (C:\git\EUS-DW-DIN-DIS-DiningTool\node_modules\css-loader\dist\index.js:44:28)
 @ ./src/styles/styles.css 2:14-148
 @ ./src/index.tsx

css file:

html,
body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  background-color: #FAFAFA;
  font-family: Segoe UI;
  font-size: 14px;
  font-weight: 300;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.43;
  letter-spacing: normal;
  color: #171717;
  overflow: hidden;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -ms-content-zooming: none; /* Disables zooming */
}

using in code:

import './styles/styles.css';

package.json:

"dependencies": {
    "@reduxjs/toolkit": "^1.3.1",
    "cross-fetch": "^3.0.4",
    "office-ui-fabric-react": "^7.103.0",
    "react": "^16.13.0",
    "react-adal": "^0.5.0",
    "react-dom": "^16.13.0",
    "react-redux": "^7.2.0",
    "redux": "^4.0.1",
    "redux-thunk": "^2.3.0",
    "ts-loader": "^6.2.2",
    "typesafe-actions": "^4.2.0"
  },
  "devDependencies": {
    "@types/react": "^16.9.27",
    "@types/react-adal": "^0.4.2",
    "@types/react-dom": "^16.9.5",
    "@types/react-redux": "^7.1.7",
    "@types/webpack-env": "^1.15.1",
    "just-scripts": "^0.36.1",
    "just-stack-react": "^1.0.4",
    "typescript": "^3.8.3"
  }

[LokiMidgard]

I had the same issue, some dependency did load the css-loader in an older version. After I updated it to version 5 it worked for me.

[LokiMidgard]

I should say it compiled for me. I have no longer any css in my output :(

[LokiMidgard]

I was able to get it to work again by no longer using the just function stylesOverlay() and updated css-loader, sass-loader and style-loader to the latest versions. (5.0.1, 10.1.1, 2.0.0)

I put following in webpackMerge.merge:

    {
      module: {
        rules: [
          {
            test: /\.css$/i,
            use: ["style-loader", "css-loader"],
          },
        ],
      },
    },
    {
      module: {
        rules: [
          {
            test: /\.s[ac]ss$/i,
            use: [
              // Creates `style` nodes from JS strings
              "style-loader",
              // Translates CSS into CommonJS
              "css-loader",
              // Compiles Sass to CSS
              "sass-loader",
            ],
          },
        ],
      },
    },

---

it would help if there would be documentation what versions of the dependency used are actual compatible.

[LokiMidgard]

I finally found the issue in the code that lead to this error. When localIdentName was set, which was always the case, the modules property was ignored, applying the modules option even when set explicit to false.

And all invocations of the createStyleLoaderRule set the localIdentName regadles of modules