search

vercel / next.js

The React Framework
https://nextjs.org
MIT License
127.07k stars 27.01k forks source link

Error: [object Object] is not a PostCSS plugin #24696

Closed enes-get-local closed 3 years ago

enes-get-local commented 3 years ago

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

timfee commented 3 years ago

I am getting this too - it seems like it is related to the newest update to the postcss-nesting plugin. Are you using that?

enes-get-local commented 3 years ago

I am getting this too - it seems like it is related to the newest update to the postcss-nesting plugin. Are you using that?

No, I don’t even use postcss

enes-get-local commented 3 years ago

I am getting this too - it seems like it is related to the newest update to the postcss-nesting plugin. Are you using that?

@timfee Here is my package.json. 

{
  "name": "next-azure",
  "version": "0.1.0",
  "author": "Chris Meagher",
  "license": "MIT",
  "private": true,
  "scripts": {
    "dev": "export CI_PLATFORM=web && next dev",
    "build": "next build",
    "start": "node server.js",
    "appflow:build": "next build && next export",
    "storybook": "start-storybook -s ./public -p 6006",
    "build-storybook": "build-storybook -c .storybook -o out",
    "capacitor-build": "npm run build && npx next export && npx cap copy && npx cap update android && cd ios/App && cd ../../",
    "capacitor-build-run-ios": "npm run capacitor-build && npx cap open ios",
    "capacitor-run-ios": "npx cap open ios",
    "icon": "svgr public/svgs -d react/_icons --icon --replace-attr-values \"#fff=currentColor,#ECEFF3=currentColor,#FF351F=currentColor,#9BA8B3=currentColor,#D7E4EE=currentColor,#556370=currentColor,#dbe0e4=currentColor,#FF1D8E=currentColor\""
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{ts,tsx,js,md,css,html}": [
      "prettier --trailing-comma es5 --single-quote --print-width 100 --write"
    ]
  },
  "resolutions": {
    "terser": "4.2.3"
  },
  "dependencies": {
    "@apollo/react-hooks": "3.1.3",
    "@apollo/react-ssr": "^3.1.5",
    "@ax-design/reveal-highlight": "0.3.0-alpha.9",
    "@capacitor/android": "^3.0.0-rc.0",
    "@capacitor/app": "^0.3.6",
    "@capacitor/browser": "^0.4.5",
    "@capacitor/cli": "^3.0.0-rc.0",
    "@capacitor/core": "^3.0.0-rc.0",
    "@capacitor/haptics": "^0.3.6",
    "@capacitor/ios": "^3.0.0-rc.0",
    "@capacitor/keyboard": "^0.5.6",
    "@microsoft/applicationinsights-react-js": "^3.0.5",
    "@microsoft/applicationinsights-web": "2.5.11",
    "@popmotion/popcorn": "^0.4.4",
    "@types/react": "^16.9.35",
    "@types/react-dom": "^16.9.8",
    "@types/react-scrollspy": "^3.3.2",
    "@types/react-stickynode": "^2.1.0",
    "@types/resize-observer-browser": "^0.1.5",
    "@types/styletron-engine-atomic": "^1.1.0",
    "@types/styletron-react": "^5.0.2",
    "@types/styletron-standard": "^2.0.1",
    "@types/uuid": "^8.0.1",
    "@zeit/next-css": "^1.0.1",
    "ag-grid-community": "^25.0.1",
    "ag-grid-enterprise": "^25.0.1",
    "ag-grid-react": "^25.0.1",
    "apexcharts": "^3.19.2",
    "apollo-boost": "^0.4.9",
    "apollo-cache-inmemory": "1.6.5",
    "apollo-client": "2.6.8",
    "apollo-link-context": "^1.0.20",
    "apollo-link-http": "1.5.16",
    "applicationinsights": "1.8.10",
    "array-move": "^3.0.1",
    "auth0-js": "^9.15.0",
    "baseui": "^9.105.0",
    "csstype": "^3.0.2",
    "d3-ease": "^0.1.5",
    "date-arithmetic": "^4.1.0",
    "express": "^4.15.3",
    "fbjs": "^2.0.0",
    "fingerprintjs2": "^2.1.2",
    "formik": "^2.2.1",
    "framer-motion": "^4.0.0",
    "graphql": "^15.0.0",
    "graphql-tag": "^2.10.3",
    "immutability-helper": "^3.1.1",
    "libphonenumber-js": "^1.9.4",
    "lodash": "^4.17.15",
    "lottie-react": "^2.0.0",
    "match-sorter": "^6.3.0",
    "moment": "^2.26.0",
    "namor": "^2.0.2",
    "next": "^10.2.0",
    "next-compose-plugins": "^2.2.0",
    "next-fonts": "^1.4.0",
    "next-images": "^1.4.1",
    "next-optimized-images": "^2.6.1",
    "next-pwa": "^5.2.7",
    "nookies": "^2.3.2",
    "react": "17.0.1",
    "react-anchor-link-smooth-scroll": "^1.0.12",
    "react-apexcharts": "^1.3.7",
    "react-beautiful-dnd": "^13.0.0",
    "react-content-loader": "^5.0.4",
    "react-dnd": "^11.1.3",
    "react-dnd-html5-backend": "^11.1.3",
    "react-docgen-typescript-loader": "^3.7.2",
    "react-dom": "17.0.1",
    "react-flexbox-grid": "^2.1.2",
    "react-hook-form": "^5.7.2",
    "react-icons": "^3.10.0",
    "react-image": "^4.0.1",
    "react-loading-skeleton": "^2.1.1",
    "react-resizable": "^1.11.0",
    "react-scroll": "^1.8.1",
    "react-scrollspy": "^3.4.2",
    "react-sortable-hoc": "^1.11.0",
    "react-spring": "^8.0.27",
    "react-stickynode": "^3.0.2",
    "react-table": "^7.6.3",
    "react-text-mask": "^5.4.3",
    "react-toastify": "^6.0.5",
    "react-use-gesture": "^9.1.3",
    "react-window": "^1.8.6",
    "resize-event": "^2.0.0",
    "resize-observer-polyfill": "^1.5.1",
    "segment-js": "^1.1.2",
    "styletron-engine-atomic": "^1.4.6",
    "styletron-react": "^5.2.7",
    "swiper": "^6.3.5",
    "typescript": "^3.9.3",
    "uuid": "^8.1.0",
    "vh-check": "^2.0.5",
    "video-react": "^0.14.1",
    "video.js": "^7.11.4",
    "yup": "^0.29.3"
  },
  "devDependencies": {
    "@babel/core": "^7.10.0",
    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.10.1",
    "@babel/plugin-proposal-optional-chaining": "^7.10.1",
    "@babel/preset-typescript": "^7.10.1",
    "@react-theming/storybook-addon": "^1.1.1",
    "@storybook/addon-a11y": "^6.2.1",
    "@storybook/addon-actions": "^6.2.1",
    "@storybook/addon-docs": "^6.2.1",
    "@storybook/addon-knobs": "^6.2.1",
    "@storybook/addon-links": "^6.2.1",
    "@storybook/addon-storysource": "^6.2.1",
    "@storybook/addon-viewport": "^6.2.1",
    "@storybook/addons": "^6.2.1",
    "@storybook/preset-typescript": "^3.0.0",
    "@storybook/react": "6.2.1",
    "@storybook/theming": "^6.2.1",
    "@svgr/cli": "^5.5.0",
    "@testing-library/react": "^10.0.4",
    "babel-eslint": "10.1.0",
    "babel-loader": "^8.2.2",
    "babel-plugin-styled-components": "^1.10.7",
    "eslint": "7.8.1",
    "eslint-config-airbnb": "18.2.0",
    "eslint-config-prettier": "6.11.0",
    "eslint-config-wesbos": "1.0.1",
    "eslint-plugin-html": "6.1.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "6.3.1",
    "eslint-plugin-prettier": "3.1.4",
    "eslint-plugin-react": "7.20.6",
    "eslint-plugin-react-hooks": "4.1.2",
    "file-loader": "^6.2.0",
    "fork-ts-checker-webpack-plugin": "^5.0.9",
    "html-webpack-plugin": "^4.5.2",
    "husky": "^4.2.5",
    "jest": "^26.0.1",
    "lint-staged": "^10.2.7",
    "node-sass": "^4.14.1",
    "prettier": "^2.0.5",
    "re-resizable": "^6.7.0",
    "rimraf": "^3.0.2",
    "sass-loader": "^8.0.2",
    "serve": "^11.3.1",
    "svg-react-loader": "^0.4.6",
    "ts-loader": "^7.0.5",
    "webpack": "^5.36.2"
  }
}
LucaNerlich commented 3 years ago

we've got the same issue, since upgrading to 10.2.0

Disabling webpack5 does not help

our package.json

Breaks with updating to 10.2.0

"dependencies": {
        "@apollo/client": "^3.3.15",
        "@brainhubeu/react-carousel": "^1.19.26",
        "@material-ui/core": "^5.0.0-alpha.32",
        "@material-ui/icons": "^4.11.2",
        "@material-ui/lab": "^5.0.0-alpha.32",
        "axios": "^0.21.1",
        "cross-env": "^7.0.3",
        "dotenv": "^8.2.0",
        "graphql": "^15.5.0",
        "next": "^10.1.3",
        "next-secure-headers": "^2.2.0",
        "pnnit-shared-components": "^1.6.1",
        "react": "^17.0.2",
        "react-anchor-link-smooth-scroll": "^1.0.12",
        "react-cookie": "^4.0.3",
        "react-dom": "^17.0.2",
        "react-google-recaptcha-v3": "^1.9.4",
        "react-grid-gallery": "^0.5.5",
        "react-iframe": "^1.8.0",
        "react-reveal": "^1.2.2",
        "react-scripts": "^4.0.3",
        "sass": "^1.32.11",
        "uuid": "^8.3.2"
    },
    "devDependencies": {
        "@emotion/react": "^11.1.5",
        "@types/node": "^14.14.43",
        "@types/react": "^17.0.4",
        "@types/uuid": "^8.3.0",
        "graphql-tag": "^2.11.0",
        "prop-types": "^15.7.2",
        "typescript": "^4.2.4"
    }
enes-get-local commented 3 years ago

we've got the same issue, since upgrading to 10.2.0

Disabling webpack5 does not help

our package.json

Breaks with updating to 10.2.0

"dependencies": {
        "@apollo/client": "^3.3.15",
        "@brainhubeu/react-carousel": "^1.19.26",
        "@material-ui/core": "^5.0.0-alpha.32",
        "@material-ui/icons": "^4.11.2",
        "@material-ui/lab": "^5.0.0-alpha.32",
        "axios": "^0.21.1",
        "cross-env": "^7.0.3",
        "dotenv": "^8.2.0",
        "graphql": "^15.5.0",
        "next": "^10.1.3",
        "next-secure-headers": "^2.2.0",
        "pnnit-shared-components": "^1.6.1",
        "react": "^17.0.2",
        "react-anchor-link-smooth-scroll": "^1.0.12",
        "react-cookie": "^4.0.3",
        "react-dom": "^17.0.2",
        "react-google-recaptcha-v3": "^1.9.4",
        "react-grid-gallery": "^0.5.5",
        "react-iframe": "^1.8.0",
        "react-reveal": "^1.2.2",
        "react-scripts": "^4.0.3",
        "sass": "^1.32.11",
        "uuid": "^8.3.2"
    },
    "devDependencies": {
        "@emotion/react": "^11.1.5",
        "@types/node": "^14.14.43",
        "@types/react": "^17.0.4",
        "@types/uuid": "^8.3.0",
        "graphql-tag": "^2.11.0",
        "prop-types": "^15.7.2",
        "typescript": "^4.2.4"
    }

I fixed it by creating new project from scratch with npx create next app. Then installed my dependencies step by step. It just worked. I m not sure what js problem exactly

LucaNerlich commented 3 years ago

Well, glad it works, but thats not really a feasible solution for larger projects.

LucaNerlich commented 3 years ago

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.

nghiepdev commented 3 years ago

The postcss-nesting@8.0.1 has been resolved issue.

timneutkens commented 3 years ago

Please provide a full reproduction as per the label.

florisdipt commented 3 years ago

You're using zeit@next-css which is deprecated and therefore no longer maintained. I was using @zeit/next-less and that depends on the zeit@next-css package, so i had the same issue. Removing that package solved it for me. Weird thing is the docs still mention it.

LucaNerlich commented 3 years ago

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".

LucaNerlich commented 3 years ago

I cannot provide a working reproduction repo, since its some weird interaction between node install, next, etc.

So far Ive also be unable to reproduce with a new next project (npx etc).

Can someone else try as well?

chemicalkosek commented 3 years ago

I'm getting the same error on build since upgrading to 10.2 And yes, I'm using @zeit/next-less since I need it. Will try to reproduce later.

LucaNerlich commented 3 years ago

For the record, we are not using zeit less.

chemicalkosek commented 3 years ago

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

LucaNerlich commented 3 years ago

running 'npm ll -json' in our project and searching in the dependency tree shows no usage of zeit/next-less or similar. So its not the only issue :/

adityasaxena commented 3 years ago

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.

LucaNerlich commented 3 years ago

did you try with yarn? Thats the only thing that fixed it for me. Really weird issue. But Next 10.2 seems to have multiple problems right now, looking at the issue tracker.

LucaNerlich commented 3 years ago

Installing postcss as a dev dependency fixed the problem for me

npm install --save-dev postcss
timneutkens commented 3 years ago

I'm once again asking you to please provide a reproduction for this issue so that it can be investigated and fixed 🙏

chemicalkosek commented 3 years ago

@timneutkens I did 5 comments above: https://github.com/vercel/next.js/issues/24696#issuecomment-835227874

nevestuan commented 3 years ago

@timneutkens I did 5 comments above: #24696 (comment)

I don't know why the example is no longer available. Thus, created an example again in this repo: https://github.com/nevestuan/next-with-ant-design-less. The project was built successfully with yarn, but it encountered the problem with npm.

node v12.20.1 npm 6.14.10

adamduncan commented 3 years ago

Also experienced this issue when updating from Next 10.0.3 to 10.2.3.

Error: [object Object] is not a PostCSS plugin

The issue persists even when postcss.config.js contains empty plugins array, or when file omitted entirely.

Can confirm that an explicit install of postcss (as per @LucaNerlich's comment) as a dependency resolves the issue.

Rolling back to <10.2 Next (10.1.3) also resolved the issue.

DavidWells commented 3 years ago

Same issue here upgrading from 10.1.1 to 11.0.0

Error: [object Object] is not a PostCSS plugin

Installing postcss fixes issue

npm install --save-dev postcss
# v 8.3.4
timneutkens commented 3 years ago

@timneutkens I did 5 comments above: #24696 (comment)

I don't know why the example is no longer available. Thus, created an example again in this repo: nevestuan/next-with-ant-design-less. The project was built successfully with yarn, but it encountered the problem with npm.

node v12.20.1 npm 6.14.10

This is using outdated/deprecated packages: https://github.com/nevestuan/next-with-ant-design-less/blob/master/next.config.js#L2-L4

timneutkens commented 3 years ago

Same issue here upgrading from 10.1.1 to 11.0.0

Error: [object Object] is not a PostCSS plugin

Installing postcss fixes issue

npm install --save-dev postcss
# v 8.3.4

Can you provide a reproduction?

timneutkens commented 3 years ago

Closing as no reproduction was provided.

balazsorban44 commented 2 years ago

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.