Autoprefixer: Error: [object Object] is not a PostCSS plugin

[bardware]

I just happened to setup a new workstation, installed some tools to process SASS files and called something like npm i -g node-sass postcss postcss-cli clean-css-cli autoprefixer browserslist on the command line.
I tried to prefix a css files using a statement like postcss expanded.css -u autoprefixer -o prefixed.css --no-map and got error Error: [object Object] is not a PostCSS plugin
I downgraded to autoprefixer@9 and the error went away.
I see version 10 had just been pushed. Is there an issue?

[evanleck]

Same here:

TypeError: Invalid PostCSS Plugin found at: plugins[0]

(@/home/evan/Code/prepaid/web/postcss.config.js)
    at /home/evan/Code/prepaid/web/node_modules/.pnpm/[email protected]/node_modules/postcss-load-config/src/plugins.js:72:15
    at Array.forEach (<anonymous>)
    at plugins (/home/evan/Code/prepaid/web/node_modules/.pnpm/[email protected]/node_modules/postcss-load-config/src/plugins.js:58:13)
    at processResult (/home/evan/Code/prepaid/web/node_modules/.pnpm/[email protected]/node_modules/postcss-load-config/src/index.js:33:14)
    at /home/evan/Code/prepaid/web/node_modules/.pnpm/[email protected]/node_modules/postcss-load-config/src/index.js:94:14
    at async Promise.all (index 0)

My postcss.config.js:

/* eslint-env node */
module.exports = {
  plugins: [
    require('autoprefixer'),
    require('cssnano')({
      preset: ['advanced', {
        autoprefixer: false,
        discardComments: {
          removeAll: true
        }
      }]
    })
  ]
}

[m4thieulavoie]

Same as above, but with a gulp task

gulp.task(
  'task-name',
  gulp.series(function () {
    return gulp
      [...]
      .pipe(
        postCSS([
          autoprefixer({
            browsersList: [
              'Chrome >= 35',
              'Firefox >= 38',
              'Edge >= 12',
              'Explorer >= 10',
              'iOS >= 8',
              'Safari >= 8',
              'Android 2.3',
              'Android >= 4',
              'Opera >= 12',
            ],
          }),
        ]),
      )
  }),
);

[ai]

Did you update to Autoprefixer 10? It do not work with old PostCSS 7 and require PostCSS 8.

Wait a little until postcss-cli and gulp-postcss was released.

[evanleck]

@ai yeah, I'm using postcss 8.0.3 and autoprefixer 10.0.0

[ai]

@evanleck you have another problem because postcss-load-config do not support PostCSS 8 plugins

[ai]

I added Known Issues section to PostCSS 8 changelog https://github.com/postcss/postcss/releases/tag/8.0.0

[m4thieulavoie]

I added Known Issues section to PostCSS 8 changelog https://github.com/postcss/postcss/releases/tag/8.0.0

Does this PR solves the gulp-postcss need to be updated PostCSS to run new plugins issue?

[ai]

@m4thieulavoie Yeap, Gulp users needs to wait before updating to PostCSS 8 plugins

[mcha-dev]

had Error: true is not a PostCSS plugin after upgrading to v10.

Then I read the changelog which mentions postcss being moved to peerDep

so I npm i postcssed and it went away

[krnlde]

had Error: true is not a PostCSS plugin after upgrading to v10.

Then I read the changelog which mentions postcss being moved to peerDep

so I npm i postcssed and it went away

Not working for me. I use postcss through parcel-bundler and configured it via postcss.config.js and added postcss as a dev dependency.

module.exports = {
  plugins: [require('autoprefixer'), require('cssnano')],
};

which resolves in true is not a PostCSS plugin.

I think parcel has to act here - or autoprefixer respectively.

[Manoz]

Just so you know, I have the same Error: true is not a PostCSS plugin issue using Laravel Mix. Install postcss and add peerDep doesn't work :/

• Autoprefixer v10.0
• Laravel mix v5.0.5
• PostCSS v8.0.3.

Here's a example of my webpack.mix.js file if you want to reproduce the issue:

mix.sass('resources/sass/app.scss', 'public/css')
  .options({
    postCss: [
      require('autoprefixer'),
      tailwindcss('./tailwind.config.js'),
    ],
  });

I'm guessing we need to wait a Laravel Mix update?

[notAro14]

Hello, I have the same error using CRA and Webpack.

My package.json

"devDependencies": {
    "autoprefixer": "^10.0.0",
    "postcss-cli": "^7.1.2",
    "tailwindcss": "^1.8.10"
  }

The postcss.config.js

module.exports = {
  plugins: [
    require("tailwindcss")("./tailwind.config.js"),
    require("autoprefixer"),
  ],
};

The error

TypeError: Invalid PostCSS Plugin found at: plugins[1]

[frederikhors]

Same here. What a mess today in the world with CI/CD environments! :smile:

[ai]

PostCSS 7.0.33 was released with a better error instead of [object Object] is not a PostCSS plugin.

Unfortunately, solving Invalid PostCSS Plugin found at: plugins[1] error message will require getting access to postcss-load-config. We will do it a little later.

[evdama]

@ai since this issue is closed now, is there another place where we can track the problem so we know when we can upgrade autoprefixer to v10 once the issue is resolved?

[ai]

@evanleck you can track the issue in your PostCSS. For instance, https://github.com/postcss/gulp-postcss/issues/161

[Kristinita]

Type: Addition ➕

The same problem for PostStylus after upgrading AutoPrefixer to 10.0. Example configuration.

Thanks.

[ai]

@Kristinita can you create an issue in PostStylus about migration PostCSS 8.

[Kristinita]

Type: Reply 💬

@ai, yes, but I’m not sure I will get any feedback from PostStylus maintainers:

1. Last PostStylus commit is dated August 2017
2. My previous PostStylus issue from February 2019 remained unanswered.

---

Type: Question :question:

@seaneking, excuse me, is any chance, that PostStylus development will continue? Unfortunately, currently, PostStylus doesn’t support the latest Autoprefixer version.

Thanks.

[madeleineostoja]

Hey @Kristinita, I've long moved on from Stylus and PostCSS, so I'm not actively maintaining poststylus. But feel free to submit a PR to support whatever's missing and I'll happily merge it.

[Kristinita]

Type: Reply 💬

@seaneking, OK, I created pull request; please review it.

And please don’t forget to push the new PostStylus version to the npm if you approve my pull request.

Thanks.

[billyromano]

I started having this issue after upgrading gulp-postcss@^9.0.0 and autoprefixer@^10.0.1 plugins to the latest versions . The npm i postcss fix worked for me. I'm hoping the gulp-postcss package updates there reference for the postcss package, so we don't need to have 2 postcss plugins installed in our project dependencies.

[ai]

@billyromano report an issue in gulp-postcss. 9.0 should support PostCSS 8 plugins.

[aca14rh]

I also met the problem of:Error loading PostCSS config: Invalid PostCSS Plugin found: [1]. the [1] is the autoprefixer plugin. I am using vue2 and just css. I tried many versions and this configuration saved my day:

  "devDependencies": {
    "autoprefixer": "^9.1.0",
    "postcss": "^8.1.10",
    "postcss-import": "^13.0.0",
    "postcss-loader": "^4.1.0",
    "precss": "^4.0.0",
},
  "browserslist": [
    "last 2 versions",
    "> 1%",
    "iOS 7",
    "last 3 iOS versions"
  ]

and postcss.config.js:

module.exports = {
  plugins: [require("precss"), require("autoprefixer")]
};

and webpack:

 {
        test: /\.css$/,
        use: [
          { loader: "style-loader" },
          {
            loader: "css-loader",
            options: {
              importLoaders: 1,
              query: {
                autoprefixer: false
              }
            }
          },
          { loader: "postcss-loader" }
        ]
      }

hope that's helpful.