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

koresar
84
koresar
commented a year ago

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-[email protected]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.
28
gonza01001
0
gonza01001
commented a year ago

The same

0
derevandal
50
derevandal
commented a year ago

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 ;)
7
toreskogp
30
toreskogp
commented a year ago

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.

6
acidbiscuit
10
acidbiscuit
commented a year ago

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

2
bovas85
115
bovas85
commented a year ago

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

17
deltacat
10
deltacat
commented a year ago

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

2
pirmax
0
pirmax
commented a year ago

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

0
bovas85
115
bovas85
commented a year ago

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

0
derevandal
50
derevandal
commented a year ago

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

0
pirmax
0
pirmax
commented a year ago

@derevandal Yes, I tried, with Yarn 👍

@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

0
bovas85
115
bovas85
commented a year ago

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

0
javialon26
90
javialon26
commented a year ago

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

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

3
pirmax
0
pirmax
commented a year ago

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

My yarn.lock file:

postcss-loader@2.1.1, [email protected]^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 :/

0
kieusonlam
301
kieusonlam
commented a year ago

[email protected] is released

0
koresar
84
koresar
commented a year ago

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

0
Informations
QuestionUnresolved
#c2640 - Created a year ago