Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

css loader invalid options in stylesOverlay.js #343

Open
strrranger opened this issue Mar 31, 2020 · 4 comments · May be fixed by #511
Open

css loader invalid options in stylesOverlay.js #343

strrranger opened this issue Mar 31, 2020 · 4 comments · May be fixed by #511

Comments

@strrranger
Copy link

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
Copy link

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
Copy link

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

@LokiMidgard
Copy link

LokiMidgard commented Jan 20, 2021

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 LokiMidgard linked a pull request Jan 21, 2021 that will close this issue
@LokiMidgard
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants