Next-plugins: next-css: can't load css module

Created on 9 Jul 2019  路  5Comments  路  Source: vercel/next-plugins

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.

Most helpful comment

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;
}

All 5 comments

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.

Was this page helpful?
0 / 5 - 0 ratings