gatsby-plugin-sass error with postCssAssets

[scottbert]

Description

Upgraded from gatsby-plugin-sass ^2.3.22 to ^2.4.1
No indication from the documentation of any breaking change that I can see, but now when I try and run gatsby develop I get the following error message:

error Invalid plugin options for "gatsby-plugin-sass":

- "postCssPlugins[1]" must be of type object
- "postCssPlugins[2]" must be of type object

My config hasn't changed.

const postcssAssets = require('postcss-assets');
const postcssNormalize = require('postcss-normalize');
const postcssPresetEnv = require('postcss-preset-env');
const sass = require('sass');

...

{
            resolve: 'gatsby-plugin-sass',
            options: {
                implementation: sass,
                postCssPlugins: [
                    postcssAssets({
                        loadPaths: ['/src/assets/images'],
                        relative: true
                    }),
                    postcssNormalize,
                    postcssPresetEnv
                ]
            }
        }

I tried changing both postcssNormalize and postcssPresetEnv to postcssNormalize() and postcssPresetEnv() but it didn't change anything (and I don't think I should need to do this anyway?)

Steps to reproduce

Clear steps describing how to reproduce the issue. Please please please link to a demo project if possible, this makes your issue _much_ easier to diagnose (seriously).

How to Make a Minimal Reproduction: https://www.gatsbyjs.org/contributing/how-to-make-a-reproducible-test-case/

Expected result

Project runs

Actual result

success open and validate gatsby-configs - 0.514s
error Invalid plugin options for "gatsby-plugin-sass":

- "postCssPlugins[1]" must be of type object
- "postCssPlugins[2]" must be of type object
not finished load plugins - 0.147s
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] develop: `gatsby develop -H 0.0.0.0`
npm ERR! Exit status 1

Environment

gatsby info --clipboard

System:
OS: macOS 10.15.7
CPU: (16) x64 Intel(R) Xeon(R) CPU E5-1680 v2 @ 3.00GHz
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 15.0.1 - /usr/local/bin/node
Yarn: 1.22.10 - /usr/local/bin/yarn
npm: 6.14.8 - /usr/local/bin/npm
Languages:
Python: 2.7.16 - /usr/bin/python
Browsers:
Chrome: 86.0.4240.111
Edge: 86.0.622.61
Firefox: 82.0.2
Safari: 14.0
npmPackages:
gatsby: ^2.25.1 => 2.25.1
gatsby-cli: ^2.12.115 => 2.12.115
gatsby-plugin-manifest: ^2.5.1 => 2.5.1
gatsby-plugin-offline: ^3.3.1 => 3.3.1
gatsby-plugin-preload-fonts: ^1.2.29 => 1.2.29
gatsby-plugin-react-helmet: ^3.3.14 => 3.3.14
gatsby-plugin-robots-txt: ^1.5.3 => 1.5.3
gatsby-plugin-sass: ^2.4.1 => 2.4.1
gatsby-plugin-sharp: ^2.7.0 => 2.7.0
gatsby-plugin-sitemap: ^2.5.0 => 2.5.0
gatsby-source-filesystem: ^2.4.0 => 2.4.0
gatsby-source-graphql: ^2.7.6 => 2.7.6
gatsby-transformer-sharp: ^2.5.21 => 2.5.21

[MKlblangenois]

I've the same error with this config :

{
   resolve: `gatsby-plugin-sass`,
   options: {
      postCssPlugins: [require(`tailwindcss`)(tailwindConfig), require(`autoprefixer`), ...(process.env.NODE_ENV === `production` ? [require(`cssnano`)] : [])],
   },
},

Console :

ERROR #11331  PLUGIN

Invalid plugin options for "gatsby-plugin-sass":

- "postCssPlugins[1]" must be of type object

not finished load plugins - 1.405s

• gatsby-plugin-sass ^2.4.1
• node-sass ^5.0.0

[scottbert]

Having just investigated a bit further, when I upgraded this module I also upgraded Gatsby. Having downgraded this module, I was still getting the error but downgrading Gatsby to 2.24 works for me even with the new version of the gatsby-plugin-sass, so this is probably an issue with the validation code in Gatsby 2.25 as opposed to the plugin - can you let me know if you want me to edit the issue further?

[mxstbr]

Fix incoming! Thanks for the detailed report folks, sorry about the troubles 👍

[le-dawg]

Have another one incoming for ya.

Steps to reproduce

1. Clone repo [1] or [2] - they are identical
2. npm install
3. npm run dev

Done. What the hell is going on with the gatsby codebase recently?
LInks:

Config:

{
      resolve: `gatsby-plugin-sass`,
      options: {
        postCssPlugins: [
          postcssPresetEnv({
            browsers: '> 0.5%, last 2 versions, ie 11'
          })
        ]
      }
    },

[Mokkapps]

I have the same problem, does someone know a workaround until the MR is fixed and a new version of the plugin is released?

[scottbert]

I have the same problem, does someone know a workaround until the MR is fixed and a new version of the plugin is released?

Yeah! It's not the plugin, it's Gatsby itself, so if you downgrade to Gatsby 2.24 it works again.

[Mokkapps]

I have the same problem, does someone know a workaround until the MR is fixed and a new version of the plugin is released?

Yeah! It's not the plugin, it's Gatsby itself, so if you downgrade to Gatsby 2.4 it works again.

Thanks, but is really 2.4 the last working version 😢 ? I am currently on 2.25.x...

[scottbert]

I have the same problem, does someone know a workaround until the MR is fixed and a new version of the plugin is released?

Yeah! It's not the plugin, it's Gatsby itself, so if you downgrade to Gatsby 2.4 it works again.

Thanks, but is really 2.4 the last working version 😢 ? I am currently on 2.25.x...

Sorry! I meant 2.24

[Mokkapps]

Thanks it worked for me with these versions:

    "gatsby": "^2.24.92",
    "gatsby-plugin-sass": "2.3.22",

[nullvariable]

I still have this issue on gatsby 2.26.0 / gatsby-plugin-sass 2.5.0 & 2.6.0-next.0 so not sure if #27829 isn't rolled into one of those versions, or if it didn't fix the issue

[Kikobeats]

this is still an issue 😭

[AlexanderBich]

Downgrading gatsby-plugin-sass to 2.3.22 fixed the issue for me.
b.t.w. gatsby version is 2.27.0-next.0