Hi. Trying to load a css module, but getting this error:
[ error ] ERROR in /test/pages/index.tsx
1:17 Cannot find module './index.css'.
> 1 | import css from './index.css';
| ^
2 |
3 | function Home() {
4 | return <div className={css.main}>Welcome to Next</div>
The index.css located in the same folder and contains this code:
.main {
background: red;
}
My configuration.
next.config.js
const withCSS = require('@zeit/next-css');
module.exports = withCSS({
cssModules: true,
cssLoaderOptions: {
importLoaders: 1,
localIdentName: "[local]___[hash:base64:5]",
}
});
package.json
{
"name": "test",
"version": "0.0.1",
"description": "test",
"main": "index.js",
"dependencies": {
"@zeit/next-css": "^1.0.1",
"next": "^9.0.0",
"react": "^16.8.6",
"react-dom": "^16.8.6"
},
"devDependencies": {
"@types/node": "^12.6.1",
"@types/react": "^16.8.23",
"typescript": "^3.5.3",
"webpack": "^4.35.3"
},
"scripts": {
"start": "next start",
"dev": "next",
"build": "next build"
},
"author": "Safort",
"license": "ISC"
}
P.S.
If I importing css like this
import './index.css';
Next can find and compile it succsesful, but in that case I can't get module class name.
The issue is very bad. Tried all the options around the google. Still get following error:
ValidationError: CSS Loader Invalid Options
options should NOT have additional properties
It's a problem with css module support in typescript. You can by pass it with :
const css = require('./index.css');
Or make a file index.css.d.ts with content:
export const main: string;
@levlexx it's worked, thank you.
Add this to next-env.d.ts
declare module '*.module.css' {
const classes: { [key: string]: string };
export default classes;
}
declare module '*.css' {
const classes: { [key: string]: string };
export default classes;
}
It would really help if the above comment regarding next-env.d.ts was in the readme.md in https://github.com/zeit/next-plugins/tree/master/packages/next-css.
Most helpful comment
Add this to next-env.d.ts