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 👍

[parsafatehi]

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

If you got "no matches found: autoprefixer@^9.8.6", fix it by escaping special character '^', as below.

yarn add autoprefixer@\^9.8.6 -D

[jeffchown]

I was having the same problem and found this post https://github.com/tailwindlabs/tailwindcss/discussions/2941#discussioncomment-145518 which fixed the initial problem for me!

Then I just had to run yarn upgrade postcss@^8.0.0 and yarn && yarn build and all went green 👍

[stephan-v]

Nov 12 2020 and this still has not been fixed, is this project dead?

[retlehs]

@stephan-v what exactly are you looking for? there are solutions in this thread along with @strarsis PRs and topics about using sage 9 with newer node versions.

we are not actively supporting sage 9 anymore but the roots community is still helping maintain it. this issue doesn’t exist in sage 10, which is nearing final release.