CODEWITHSUNDEEP
reactjswebpacknext.jscss-loader
tung2389
tung2389

Reputation: 131

Css loader invalid option with Nextjs

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.

Upvotes: 1

Views: 3741

Answers (1)

felixmosh
felixmosh

Reputation: 35503

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.

Upvotes: 1

Related Questions