next.js: Error: [object Object] is not a PostCSS plugin

What version of Next.js are you using?

10.2.0

What version of Node.js are you using?

12.18.3

What browser are you using?

Chrome

What operating system are you using?

Windows

How are you deploying your application?

Azure

Describe the Bug

I get build error when run next build after updated next@10.2.0

Expected Behavior

Build should be done successfuly

To Reproduce

npm i npm run build

next.config.js

const withPlugins = require('next-compose-plugins');
const withPWA = require('next-pwa');
const withImages = require('next-images');
const withFonts = require('next-fonts');

const ci_platform = process.env.CI_PLATFORM || 'web';

const compress = process.env.NEXT_COMPRESS ? !!process.env.NEXT_COMPRESS : true;
const assetPrefix = process.env.NEXT_PUBLIC_CDN_URL || '';
const buildId = process.env.NEXT_PUBLIC_BUILD_ID || null;

let configObj = {
  pwa: {
    // disable: process.env.NODE_ENV === 'development',
    dest: 'public',
  },
  // exportTrailingSlash: true,
  exportPathMap: function () {
    return {
      '/': { page: '/' },
    };
  },
  future: {
    webpack5: true,
  },
  reactStrictMode: true,
  poweredByHeader: false,
  compress,
  assetPrefix,
  generateBuildId: async () => buildId,
};

if (ci_platform === 'web') {
  configObj.i18n = {
    locales: ['en-US', 'es-US'],
    defaultLocale: 'en-US',
  };
}

module.exports = withPlugins([withImages, withFonts], withPWA({ ...configObj }));

Error image: image

About this issue

  • Original URL
  • State: closed
  • Created 3 years ago
  • Reactions: 11
  • Comments: 28 (11 by maintainers)

Most upvoted comments

Installing postcss as a dev dependency fixed the problem for me

npm install --save-dev postcss

hm,

node 14.15.2 npm 6.14.9

  1. rm -rf node_modules
  2. npm cache clean --force
  3. yarn install
  4. yarn run build

yarn works fine now. However npm does not.


Ive tried this now multiple times, it “works” with yarn everytime and with plain old npm breaks. 14.16.1 / 6.14.12 also does not help.

Can confirm that this error is happening on a next.js repository which I updated today and found the error. Repo has been functional for 1+ year. I followed a few steps to try and address what was going but nothing has worked so far.

Reproduction is as simple as using the with-antd-design-less example. https://github.com/vercel/next.js/tree/canary/examples/with-ant-design-less

Please note that this example doesn’t work without installing webpack 4 So the steps to reproduce the error:

npx create-next-app --example with-ant-design-less with-ant-design-app
npm install webpack@4 -D
npm run build

You should see the error

that cannot be one only problem, as ive shown in my post, using yarn -> everything works. As soon as I tried to install and build with npm, it breaks. If I downgrade to next < 10.2, npm works again.

This is some weird “dev infrastructure” thing.

Im working on windows, but my colleague on linux can reproduce my error and “fix”.

The postcss-nesting@8.0.1 has been resolved issue.