Docz: Your current PostCSS version is 6.0.23, but autoprefixer uses 7.0.17

[MehdiMahmoudi]

Bug Report

I systematically get this error after running yarn docz dev, and right after Gatsby bootstrapping finished.

I'm using docz 2.0.0-rc.1 tried with both React/React DOM 16.9.0 and 16.8.6

Unknown error from PostCSS plugin. Your current PostCSS version is 6.0.23, but autoprefixer uses 7.0.17. Perhaps this is the source of the error below.

Happens on a fresh install of a react app with create-react-app.

Environment
macOS Mojave
Node v10.16.0

Thanks!

[bilobom]

same issue here

[mgambati]

Gatsby is using very old [email protected] dep wich conflitcs with react-scripts.

$ npm ls postcss

+-- [email protected]
| +-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| | +-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | | `-- [email protected]
| | `-- [email protected]
| |   `-- [email protected]
| +-- [email protected]
| | `-- [email protected]
| |   +-- [email protected]
| |   | +-- [email protected]
| |   | | `-- [email protected]  deduped
| |   | `-- [email protected]
| |   |   `-- [email protected]  deduped
| |   `-- [email protected]  deduped
| +-- [email protected]
| | `-- [email protected]  deduped
| `-- [email protected]
|   `-- [email protected]  deduped

[bonashen]

$ npm ls postcss

+-- [email protected]
| +-- [email protected]  deduped
| +-- [email protected]
| | +-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | | `-- [email protected]
| | | `-- [email protected]
| | |   `-- [email protected]
| | `-- [email protected]  deduped
| +-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| | `-- [email protected]
| `-- [email protected]
|   `-- [email protected]

[JadeDruid]

anyone know how to fix it?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[emilianoarlettaz]

Hi, the same issue here:
MacOS 10.13.6
Node v10.16.2

Unknown error from PostCSS plugin. Your current PostCSS version is 6.0.23, but autoprefixer uses 7.0.23.

[nazarimohamad]

Look at the the answer. You should update your PostCSS by installing gatsby-plugin-postcss and add that in plugin. after that in postcss.config.js add these lines

const postcssPresetEnv = require(`postcss-preset-env`)

module.exports = () => ({
  plugins: [
    postcssPresetEnv({
      stage: 0,
    }),
  ],
})

[nazarimohamad]

look at the answer. install the gatsby-plugin-postcss and add the plugin. then in postcss.config.js type

const postcssPresetEnv = require(`postcss-preset-env`)

module.exports = () => ({
  plugins: [
    postcssPresetEnv({
      stage: 0,
    }),
  ],
})

[jpcmf]

@nazarimohamad I got this issue in my project using webpack, so basically i've install the postcss-preset-env and then update my postcss.config.js.

from:

module.exports = {
  plugins: {
    'rucksack-css': {},
    lost: {},
    autoprefixer: {},
    cssnano: {},
  },
};

to:

const postcssPresetEnv = require(`postcss-preset-env`);

module.exports = () => ({
  plugins: [
    postcssPresetEnv({
      stage: 0,
    }),
  ],
});

It's working. Hope it helps anybody :)

[kahboom]

Thanks @jpcmf that fixed it for me 👍

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.