Css loader invalid option with Nextjs

Question

I use next js in my app (it automatically uses webpack) , here is my package.json:

{
  "name": "myreact",
  "version": "0.1.0",
  "private": true,
  "homepage": ".",
  "dependencies": {
    "@zeit/next-css": "^1.0.1",
    "bootstrap": "^3.3.4",
    "classnames": "^2.2.6",
    "css-loader": "^2.1.0",
    "express": "^4.16.4",
    "next": "^8.0.3",
    "next-images": "^1.0.4",
    "react": "^16.8.3",
    "react-dom": "^16.8.3"
  },
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }
}

And here is my next.config.js:

const withCSS = require('@zeit/next-css');
const withImages = require('next-images');

module.exports = withCSS(withImages());

However, when I use npm run dev, it always throw an error:

ValidationError: CSS Loader Invalid Options

options should NOT have additional properties
Could not find files for /index in .next/build-manifest.json
Warning: Each child in a list should have a unique "key" prop.

I have tried to google but I found no solution to my problems.

I think you should provide your webpack config rather than package.json file — G_S
– G_S, Commented Mar 2, 2019 at 11:56
Next js automatically config webpack, so I don't need to use it. — tung2389
– tung2389, Commented Mar 2, 2019 at 12:17

felixmosh · Accepted Answer · 2019-03-02 12:37:14Z

1

You are using the new css-loader (v2.0.0), that added an options validation.

You can print the cssLoader options from the webpack config, and remove the redundant one.

For printing the webpack config, you need to change you next.config.js file to that:

const withCSS = require('@zeit/next-css');
const withImages = require('next-images');

module.exports = withCSS(withImages({
  webpack: (config, options) => {
     console.log(config);
     return config;
  }
}));

Before that, you should not install your dep (next-css) dep (css-loader), try to remove it from you package.json and reinstall again, this should solve, if not, try what I've suggested.

There is a github thread regarding that: https://github.com/webpack-contrib/css-loader/issues/863#issuecomment-445747386.

answered Mar 2, 2019 at 12:37

felixmosh

35.8k10 gold badges81 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Css loader invalid option with Nextjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related