Sage: Yarn fails to compile when Sage project created with Tailwind selected. PostCSS Loader has been initialized using an options object that does not match the API schema.

[shiftops]

• [X] I've read the guidelines for Contributing to Roots Projects
• [X] This request isn't a duplicate of an existing issue
• [X] I've read the docs and followed them (if applicable)
• [X] This is not a personal support request that should be posted on the Roots Discourse community

Description

Yarn fails to compile when Sage project created with Tailwind selected. PostCSS error:

Module build failed: ModuleBuildError: Module build failed: ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema.

Steps to reproduce

1. Create sage project composer create-project roots/sage
2. Select tailwind when installing
3. yarn && yarn build

Expected behavior: [What you expect to happen]
Yarn compiles succesfully

Actual behavior: [What actually happens]

ERROR Failed to compile with 2 errors 12:13:34 pm

error in ./resources/assets/styles/main.scss

Module build failed: ModuleBuildError: Module build failed: ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema.

• options has an unknown property 'plugins'. These properties are valid:
  object { postcssOptions?, execute?, sourceMap? }
  at validate (/home/dave/web/spp/web/app/themes/spp/node_modules/schema-utils/dist/validate.js:104:11)
  at Object.loader (/home/dave/web/spp/web/app/themes/spp/node_modules/postcss-loader/dist/index.js:43:29)
  at /home/dave/web/spp/web/app/themes/spp/node_modules/webpack/lib/NormalModule.js:195:19
  at /home/dave/web/spp/web/app/themes/spp/node_modules/loader-runner/lib/LoaderRunner.js:367:11
  at /home/dave/web/spp/web/app/themes/spp/node_modules/loader-runner/lib/LoaderRunner.js:233:18

@ multi ./scripts/main.js ./styles/main.scss

error in ./resources/assets/styles/main.scss

Module build failed: ModuleBuildError: Module build failed: ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema.

• options has an unknown property 'plugins'. These properties are valid:
  object { postcssOptions?, execute?, sourceMap? }
  at validate (/home/dave/web/spp/web/app/themes/spp/node_modules/schema-utils/dist/validate.js:104:11)
  at Object.loader (/home/dave/web/spp/web/app/themes/spp/node_modules/postcss-loader/dist/index.js:43:29)
  at /home/dave/web/spp/web/app/themes/spp/node_modules/webpack/lib/NormalModule.js:195:19
  at /home/dave/web/spp/web/app/themes/spp/node_modules/loader-runner/lib/LoaderRunner.js:367:11
  at /home/dave/web/spp/web/app/themes/spp/node_modules/loader-runner/lib/LoaderRunner.js:233:18
  Asset Size Chunks Chunk Names
  scripts/main.js 8.74 kB 0 [emitted] main
  scripts/customizer.js 3.24 kB 1 [emitted] customizer
  scripts/main.js.map 8.51 kB 0 [emitted] main
  scripts/customizer.js.map 3.07 kB 1 [emitted] customizer
  error Command failed with exit code 2.
  info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
  dave@dave-AERO-15XV8:~/web/spp/web/app/themes/spp$ yarn rebuild
  yarn run v1.22.5
  error Command "rebuild" not found.
  info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
  dave@dave-AERO-15XV8:~/web/spp/web/app/themes/spp$ yarn install
  yarn install v1.22.5
  [1/5] Validating package.json...
  [2/5] Resolving packages...
  success Already up-to-date.
  Done in 0.55s.
  dave@dave-AERO-15XV8:~/web/spp/web/app/themes/spp$ yarn
  yarn install v1.22.5
  [1/5] Validating package.json...
  [2/5] Resolving packages...
  [3/5] Fetching packages...
  info [email protected]: The platform "linux" is incompatible with this module.
  info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
  info [email protected]: The platform "linux" is incompatible with this module.
  info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
  [4/5] Linking dependencies...
  warning " > [email protected]" has incorrect peer dependency "webpack@^4.0.0 || ^5.0.0".
  warning " > [email protected]" has unmet peer dependency "postcss@^7.0.0 || ^8.0.1".
  warning " > [email protected]" has unmet peer dependency "postcss@^8.1.0".
  warning " > [email protected]" has incorrect peer dependency "eslint@^6.0.0 || ^7.0.0".
  warning " > [email protected]" has incorrect peer dependency "webpack@^4.0.0 || ^5.0.0".
  warning " > [email protected]" has incorrect peer dependency "webpack@^4.0.0 || ^5.0.0".
  warning " > [email protected]" has incorrect peer dependency "node-sass@^4.0.0".
  warning " > [email protected]" has incorrect peer dependency "stylelint@^8.0.0".
  warning " > [email protected]" has incorrect peer dependency "webpack@^1.13.2 || ^2.7.0 || ^3.11.0 || ^4.4.0".
  warning " > [email protected]" has incorrect peer dependency "webpack@^4.0.0 || ^5.0.0".
  [5/5] Building fresh packages...
  Done in 21.13s.
  dave@dave-AERO-15XV8:~/web/spp/web/app/themes/spp$ yarn build
  yarn run v1.22.5
  $ webpack --progress --config resources/assets/build/webpack.config.js
  95% emitting

ERROR Failed to compile with 2 errors 12:15:29 pm

error in ./resources/assets/styles/main.scss

Module build failed: ModuleBuildError: Module build failed: ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema.

• options has an unknown property 'plugins'. These properties are valid:
  object { postcssOptions?, execute?, sourceMap? }
  at validate (/home/dave/web/spp/web/app/themes/spp/node_modules/schema-utils/dist/validate.js:104:11)
  at Object.loader (/home/dave/web/spp/web/app/themes/spp/node_modules/postcss-loader/dist/index.js:43:29)
  at /home/dave/web/spp/web/app/themes/spp/node_modules/webpack/lib/NormalModule.js:195:19
  at /home/dave/web/spp/web/app/themes/spp/node_modules/loader-runner/lib/LoaderRunner.js:367:11
  at /home/dave/web/spp/web/app/themes/spp/node_modules/loader-runner/lib/LoaderRunner.js:233:18

@ multi ./scripts/main.js ./styles/main.scss

error in ./resources/assets/styles/main.scss

Module build failed: ModuleBuildError: Module build failed: ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema.

• options has an unknown property 'plugins'. These properties are valid:
  object { postcssOptions?, execute?, sourceMap? }
  at validate (/home/dave/web/spp/web/app/themes/spp/node_modules/schema-utils/dist/validate.js:104:11)
  at Object.loader (/home/dave/web/spp/web/app/themes/spp/node_modules/postcss-loader/dist/index.js:43:29)
  at /home/dave/web/spp/web/app/themes/spp/node_modules/webpack/lib/NormalModule.js:195:19
  at /home/dave/web/spp/web/app/themes/spp/node_modules/loader-runner/lib/LoaderRunner.js:367:11
  at /home/dave/web/spp/web/app/themes/spp/node_modules/loader-runner/lib/LoaderRunner.js:233:18
  Asset Size Chunks Chunk Names
  scripts/main.js 8.74 kB 0 [emitted] main
  scripts/customizer.js 3.24 kB 1 [emitted] customizer
  scripts/main.js.map 8.51 kB 0 [emitted] main
  scripts/customizer.js.map 3.07 kB 1 [emitted] customizer
  error Command failed with exit code 2.
  info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Reproduces how often: [What percentage of the time does it reproduce?]
100%

Versions

9.0.10: November 9th, 2020
Ubuntu 18.04.5 LTS

[lorenzofaresin]

+1

[joshuafredrickson]

It looks like this is caused by postcss-loader@^4.0.4. The quick fix is to downgrade autoprefixer and postcss-loader like so:

yarn add autoprefixer@^9.8.6 -D
yarn add postcss-loader@~3.0.0 -D

[collinberg]

Downgrading PostCSS to 3.0.0 worked for me.

npm uninstall postcss-loader --save-dev
npm install postcss-loader@~3.0.0 --save-dev

Then running yarn again just for safe keeping.

[hilalrizek]

it is not working :(

Try deleting node_modules then reinstalling

[lcottingham]

Module build failed: Error: PostCSS plugin autoprefixer requires PostCSS 8.

Followed all the above steps.. any ideas?

[ghettifish]

@lcottingham in case you didn't see this article over onStack Overflow.

I downgraded autoprefixer to ^9.0.0 and was able to get past the same error you mentioned above but then I got the error:

Module build failed: Error: PostCSS plugin postcss-nested requires PostCSS 8.

And followed these steps in the Tailwind docs running:

npm uninstall tailwindcss postcss autoprefixer
npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

After running the above commands and fixing a handful of The 'border-gray-500' class doesn't exist errors, I am now up and running with Tailwind 2.0.2 on Sage 9.0.10.

Hopefully this helps someone 👍