Nuxt.js: "Failed to compile" "PostCSS Loader Invalid Options" useConfigFile is an invalid additional property

Created on 18 Mar 2018  ยท  17Comments  ยท  Source: nuxt/nuxt.js

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

> [email protected] 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.

This question is available on Nuxt.js community (#c2640)

Most helpful comment

for now you can solve this by installing in dev dependancies manually [email protected]
npm install --save-dev [email protected]

All 17 comments

The same

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

  1. 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
  1. 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"
  },
  1. wait for update ;)

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.

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

for now you can solve this by installing in dev dependancies manually [email protected]
npm install --save-dev [email protected]

same issue. use npm install --save-dev [email protected] fixed.

The same problem for me! Downgrade package doesn't works for me, when I push on production, I get back this error.

hmm very odd, what do you mean with pushing on production @pirmax ?

@pirmax do u try npm install --save-dev [email protected]?

@derevandal Yes, I tried, with Yarn :+1:

@bovas85 I mean, I pushing on production with Dokku, while push, the build is OK, but in console the build give me an error: https://pastebin.com/05vunrzx

Did you try removing the node_modules folder or doing npm rebuild ?

same here! i solved with [email protected] in devDependencies.

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

How I can update only yarn.lock instead of package.json? I don't know packages very well...

My yarn.lock file:

[email protected], postcss-loader@^2.1.0:
  version "2.1.1"
  resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-2.1.1.tgz#208935af3b1d65e1abb1a870a912dd12e7b36895"
  dependencies:
    loader-utils "^1.1.0"
    postcss "^6.0.0"
    postcss-load-config "^1.2.0"
    schema-utils "^0.4.0"

I think Dokku build without yarn.lock and install the most recent version of postcss-loader :/

[email protected] is released

The owner of the postcss-loader is a very kind person. He solved the issue for all of us.
Thank you @ai !

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

VincentLoy picture VincentLoy  ยท  3Comments

msudgh picture msudgh  ยท  3Comments

uptownhr picture uptownhr  ยท  3Comments

bimohxh picture bimohxh  ยท  3Comments

pehbehbeh picture pehbehbeh  ยท  3Comments