Gatsby: PostCSS error: false is not a PostCSS plugin [2.0.0-beta.37]

[crucialfelix]

Description

I am getting PostCSS errors when compiling scss files. I have gatsby-plugin-sass 2.0.0-beta.5 installed.

Error: false is not a PostCSS plugin

 error  in ./default-site/src/components/spacing.scss

Module build failed (from ./node_modules/postcss-loader/lib/index.js):
Error: false is not a PostCSS plugin
    at Processor.normalize (/Users/crucialfelix/code/matterminds/node_modules/postcss/lib/processor.js:145:15)
    at new Processor (/Users/crucialfelix/code/matterminds/node_modules/postcss/lib/processor.js:51:25)
    at postcss (/Users/crucialfelix/code/matterminds/node_modules/postcss/lib/postcss.js:73:10)
    at Promise.resolve.then.then (/Users/crucialfelix/code/matterminds/node_modules/postcss-loader/lib/index.js:143:12)

(spacing.scss is trivial, it has nothing to do with that file)

Steps to reproduce

I'm using:

"gatsby-plugin-sass": "2.0.0-beta.5",

gatsby-configs I've tried:

    {
      resolve: 'gatsby-plugin-sass'
    }

    {
      resolve: 'gatsby-plugin-sass',
      options: {
        includePaths: [require('path').resolve(__dirname, 'node_modules')]
      }
    }

Even this still results in postCssPlugins being undefined for plugins using onCreateWebpackConfig:

    {
      resolve: 'gatsby-plugin-sass',
      options: {
        includePaths: [require('path').resolve(__dirname, 'node_modules')],
        postCssPlugins: []
      }
    }

Expected result

Compiling scss

Actual result

Throwin' errors

gatsby-plugin-sass is not using the current gatsby api:

https://github.com/gatsbyjs/gatsby/blob/e67e5336626015748790b6ff181ef3b5a28c8b07/packages/gatsby-plugin-sass/src/gatsby-node.js#L3-L6

There are no such options, those are undefined.

My gatsby-node.js

exports.onCreateWebpackConfig = (
  { actions, stage, rules, plugins, loaders },
  options
  // { postCssPlugins, ...sassOptions }   many plugins use this, but these are all undefined
) => {
  console.log(options); // { plugins: [] }

  // console.log(postCssPlugins, sassOptions);
};

Environment

System:
OS: macOS High Sierra 10.13.3
CPU: x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz
Shell: 5.3 - /bin/zsh
Binaries:
Node: 10.1.0 - ~/.nvm/versions/node/v10.1.0/bin/node
Yarn: 1.7.0 - /usr/local/bin/yarn
npm: 6.1.0 - ~/.nvm/versions/node/v10.1.0/bin/npm
Browsers:
Chrome: 67.0.3396.99
Safari: 11.0.3
npmPackages:
gatsby: 2.0.0-beta.37 => 2.0.0-beta.37
gatsby-link: next => 2.0.0-beta.4
gatsby-plugin-antd: ^1.0.12 => 1.0.12
gatsby-plugin-catch-links: 2.0.2-beta.2 => 2.0.2-beta.2
gatsby-plugin-react-helmet: 3.0.0-beta.3 => 3.0.0-beta.3
gatsby-plugin-sass: 2.0.0-beta.5 => 2.0.0-beta.5
gatsby-plugin-sharp: 2.0.0-beta.5 => 2.0.0-beta.5
gatsby-plugin-typescript: 2.0.0-beta.5 => 2.0.0-beta.5
gatsby-plugin-typography: 2.2.0-beta.2 => 2.2.0-beta.2
gatsby-remark-autolink-headers: 1.4.19 => 1.4.19
gatsby-remark-copy-images: 0.2.1 => 0.2.1
gatsby-remark-copy-linked-files: 1.5.37 => 1.5.37
gatsby-remark-embed-video: 1.4.0 => 1.4.0
gatsby-remark-external-links: 0.0.4 => 0.0.4
gatsby-remark-images: 2.0.1-beta.6 => 2.0.1-beta.6
gatsby-remark-prismjs: 2.0.4 => 2.0.4
gatsby-remark-responsive-iframe: 1.4.20 => 1.4.20
gatsby-source-filesystem: 2.0.1-beta.3 => 2.0.1-beta.3
gatsby-transformer-json: 1.0.20 => 1.0.20
gatsby-transformer-remark: 1.7.44 => 1.7.44
gatsby-transformer-yaml: 1.5.18 => 1.5.18
npmGlobalPackages:
gatsby-cli: 1.1.58
gatsby: 1.9.270 // but I don't run this, I use npm start

All packages

    "@types/es6-promise": "^3.3.0",
    "@types/js-yaml": "3.11.2",
    "@types/lodash": "4.14.110",
    "@types/node": "10.3.0",
    "classnames": "^2.2.6",
    "gatsby": "2.0.0-beta.37",
    "gatsby-link": "next",
    "gatsby-plugin-antd": "^1.0.12",
    "gatsby-plugin-catch-links": "2.0.2-beta.2",
    "gatsby-plugin-react-helmet": "3.0.0-beta.3",
    "gatsby-plugin-sass": "2.0.0-beta.5",
    "gatsby-plugin-sharp": "2.0.0-beta.5",
    "gatsby-plugin-typescript": "2.0.0-beta.5",
    "gatsby-plugin-typography": "2.2.0-beta.2",
    "gatsby-remark-autolink-headers": "1.4.19",
    "gatsby-remark-copy-images": "0.2.1",
    "gatsby-remark-copy-linked-files": "1.5.37",
    "gatsby-remark-embed-video": "1.4.0",
    "gatsby-remark-external-links": "0.0.4",
    "gatsby-remark-images": "2.0.1-beta.6",
    "gatsby-remark-prismjs": "2.0.4",
    "gatsby-remark-responsive-iframe": "1.4.20",
    "gatsby-source-filesystem": "2.0.1-beta.3",
    "gatsby-transformer-json": "1.0.20",
    "gatsby-transformer-remark": "1.7.44",
    "gatsby-transformer-yaml": "1.5.18",
    "js-yaml": "3.12.0",
    "lodash": "^4.17.10",
    "node-sass": "4.9.2",
    "prismjs": "1.15.0",
    "purecss": "1.0.0",
    "react": "16.4.1",
    "react-dom": "16.4.1",
    "react-helmet": "^5.2.0",
    "react-markdown": "3.3.4",
    "react-typography": "0.16.13",
    "tachyons-sass": "4.9.3",
    "typescript": "2.9.2",
    "typography": "0.16.17"

File contents (if changed)

gatsby-config.js: N/A
package.json: N/A
gatsby-node.js: N/A

gatsby-browser.js: N/A
gatsby-ssr.js: N/A

[antonjb]

I don't believe this is related to SCSS. I just tried running gatsby develop from the default starter, which also throws Error: false is not a PostCSS plugin anytime a CSS file is imported. In this case it's the layout.css file that comes with the starter. If I comment out the import, everything is fine.

[antonjb]

Just a touch more information - dropping to 2.0.0-beta.36 doesn't throw this error. Going to guess it's somehow related to the version bumps in #6455

[crucialfelix]

Confirmed, even the starters are doing this that don't have sass in at all:

gatsby new my-blog https://github.com/gatsbyjs/gatsby-starter-blog\#v2

✖ ｢wdm｣:
ERROR in ./node_modules/typeface-montserrat/index.css (./node_modules/css-loader??ref--9-oneOf-1-1!./node_modules/postcss-loader/lib??postcss-2!./node_modules/typeface-montserrat/index.css)
Module build failed (from ./node_modules/postcss-loader/lib/index.js):
Error: false is not a PostCSS plugin
    at Processor.normalize (/Users/crucialfelix/Downloads/my-blog/node_modules/postcss/lib/processor.js:145:15)
    at new Processor (/Users/crucialfelix/Downloads/my-blog/node_modules/postcss/lib/processor.js:51:25)
    at postcss (/Users/crucialfelix/Downloads/my-blog/node_modules/postcss/lib/postcss.js:73:10)
    at Promise.resolve.then.then (/Users/crucialfelix/Downloads/my-blog/node_modules/postcss-loader/lib/index.js:143:12)
    at tryCatch (/Users/crucialfelix/Downloads/my-blog/node_modules/es6-promise/dist/es6-promise.js:409:12)
    at invokeCallback (/Users/crucialfelix/Downloads/my-blog/node_modules/es6-promise/dist/es6-promise.js:424:13)
    at publish (/Users/crucialfelix/Downloads/my-blog/node_modules/es6-promise/dist/es6-promise.js:398:7)
    at flush (/Users/crucialfelix/Downloads/my-blog/node_modules/es6-promise/dist/es6-promise.js:128:5)
    at process._tickCallback (internal/process/next_tick.js:61:11)
 @ ./node_modules/typeface-montserrat/index.css 2:14-121 21:1-42:3 22:19-126
 @ ./src/components/Bio.js
 @ ./src/templates/blog-post.js
 @ ./.cache/sync-requires.js
 @ ./.cache/root.js
 @ ./.cache/app.js
 @ multi ./node_modules/react-hot-loader/patch.js (webpack)-hot-middleware/client.js?path=http://localhost:8001/__webpack_hmr&reload=true&overlay=false ./.cache/app

[crucialfelix]

Ah, but I just updated to 37 because master was broken. I think I'm going to have to retreat to v1 due to time constraints.

[carusog]

@jquense It's seems like the merging has been blocked by Travis.ci

[carusog]

A quick fix for those on the rush, thanks to @jquense fix.
Go to /node_modules/gatsby/dist/utils/webpack-utils.js row number 123
and add Jason's fix like so:

// from this
// }), ..._plugins];
// to this
}), ..._plugins].filter(Boolean);

[KyleAMathews]

@jquense' fix is published in beta.38. Please let us know if that fixes things for y'all!

[gobeli]

@KyleAMathews just ran into the same error and the update fixed it. Thanks!