css loader invalid options in stylesOverlay.js
Open
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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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