microsoft / microsoft/just

css loader invalid options in stylesOverlay.js

Open
#343 4 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
2k
Forks
97
PR merge metrics
No merged PRs in 30d

Description

Hello!
I have the same error as here https://github.com/microsoft/just/issues/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"
  }

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with stylesOverlay.js and the CSS import shown from src/index.tsx, then reproduce the reported build using the provided css-loader validation error. Check how the loader options are assembled and confirm that the CSS build completes without the invalid-options error.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, typescript
Domain
build-system
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.