nuxt: "Failed to compile" "PostCSS Loader Invalid Options" useConfigFile is an invalid additional property

npm run dev fails to compile fresh new nuxt.js project.

Nuxt.js v1.4.0

How to reproduce:

vue init vuetifyjs/nuxt my-project
cd my-project
npm i
npm run dev

You will see this error in the console:

⋊> ~/c/my-project npm run dev

> my-project@1.0.0 dev /Users/vasyl/code/my-project
> nuxt

  nuxt:build App root: /Users/vasyl/code/my-project +0ms
  nuxt:build Generating /Users/vasyl/code/my-project/.nuxt files... +1ms
  nuxt:build Generating files... +48ms
  nuxt:build Generating routes... +12ms
  nuxt:build Building files... +28ms
  nuxt:build Adding webpack middleware... +818ms
  ████████████████████ 100%

Build completed in 7.46s

 ERROR  Failed to compile with 1 errors                                                                           16:53:08

 error  in ./assets/style/app.styl

Module build failed: ValidationError: PostCSS Loader Invalid Options

options['useConfigFile'] is an invalid additional property


 @ ./assets/style/app.styl 4:14-195 13:3-17:5 14:22-203
 @ ./.nuxt/App.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi webpack-hot-middleware/client?name=client&reload=true&timeout=30000&path=/__webpack_hmr ./.nuxt/client.js

Temporary not really stable workaround.

Open the file ./node_modules/nuxt/lib/builder/webpack/postcss.js
Comment out the line with useConfigFile: false
Run npm run dev - all OK this time.

<div align="right">_{This question is available on Nuxt.js community (#c2640)}</div>

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 27
Comments: 17

Commits related to this issue

Require specific version of postcss-loader See https://github.com/nuxt/nuxt.js/issues/3048 — committed to bjuppa/kingdom by bjuppa 6 years ago

Most upvoted comments

for now you can solve this by installing in dev dependancies manually postcss-loader@2.1.1 npm install --save-dev postcss-loader@2.1.1

+17

bovas85 on Mar 19, 2018

Locking the version of postcss-loader at 2.1.1 for nuxt dependencies in package-lock.json resolves the issue.

+10

acidbiscuit on Mar 18, 2018

Thanks! I made a script to do this through npm run (for Ubuntu).

make a file called replace.sh in project’s root folder containing:

#!/usr/bin/env bash
echo "sed -i -e 's/useConfigFile: false,/ /g' ./node_modules/nuxt/lib/builder/webpack/postcss.js

add this in scripts’ package.json

    "replace": "./replace.sh"

it will look like this:

  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "precommit": "npm run lint",
    "replace": "./replace.sh"
  },

wait for update 😉

andrevandal on Mar 18, 2018

It seems to be a problem after postcss-loader updated to 2.1.2.

Setting the version of postcss-loader to 2.1.1 solved the problem form me.

torepettersen on Mar 18, 2018

same here! i solved with postcss-loader@2.1.1 in devDependencies.

@pirmax check the yarn.lock maybe the version is locked here.

javialon26 on Mar 19, 2018

same issue. use npm install --save-dev postcss-loader@2.1.1 fixed.

deltacat on Mar 19, 2018

https://github.com/postcss/postcss-loader/issues/347

andrevandal on Mar 18, 2018