Error: PostCSS plugin postcss-prefixwrap requires PostCSS 8.
hrgondaliya opened this issue · comments
I am getting this error whenever I run npm start. I tried a couple of fixes but none of them work for me. I tried to change the version of postcss-prefixwrap to 1.26.0 but it didn't work. Please help me with this issue. I have updated by react script to "^5.0.0", and then I am started to get this error.
This is my package.json
{ "name": "components-web", "version": "0.1.0", "private": true, "dependencies": { "@babel/plugin-proposal-decorators": "^7.8.3", "@fortawesome/fontawesome-svg-core": "^1.2.36", "@fortawesome/free-regular-svg-icons": "^5.12.1", "@fortawesome/free-solid-svg-icons": "^5.15.4", "@fortawesome/pro-light-svg-icons": "^5.12.1", "@fortawesome/pro-regular-svg-icons": "^5.12.1", "@fortawesome/pro-solid-svg-icons": "^5.15.4", "@fortawesome/react-fontawesome": "^0.1.8", "ajv": "^6.12.0", "antd": "^4.16.13", "apollo-boost": "^0.4.9", "aws-sdk": "^2.997.0", "axios": "^0.21.4", "bluebird": "^3.7.2", "cluster": "^0.7.7", "compression": "^1.7.1", "cookie-parser": "^1.4.3", "core-js": "^2.6.11", "cors": "^2.8.5", "crypto-js": "^3.3.0", "customize-cra": "^0.6.1", "evaporate": "^2.1.4", "express": "^4.16.2", "file-saver": "^1.3.8", "graphql": "^16.2.0", "helmet": "^3.21.3", "immutability-helper": "^3.0.1", "jquery": "^3.5.1", "mobx": "^4.15.4", "mobx-react": "^5.2.0", "moment": "^2.22.2", "morgan": "^1.9.0", "postcss": "^8.4.5", "postcss-cli": "^9.1.0", "postcss-loader": "^4.1.0", "postcss-prefixwrap": "^1.26.0", "primeicons": "^1.0.0", "primereact": "^3.4.0", "prop-types": "^15.6.1", "qrcode.react": "^0.9.3", "react": "^16.12.0", "react-apollo": "^2.1.9", "react-app-rewire-postcss": "^3.0.2", "react-app-rewired": "^2.1.5", "react-compound-timer": "^1.1.15", "react-dom": "^16.12.0", "react-resizable": "^3.0.4", "react-scripts": "^5.0.0", "react-test-renderer": "^16.12.0", "react-transition-group": "^2.9.0", "typescript": "^4.4.3", "validator": "^13.7.0" }, "devDependencies": { "eslint": "^7.32.0", "eslint-config-airbnb": "18.2.1", "eslint-plugin-import": "^2.20.1", "eslint-plugin-jest": "^22.21.0", "eslint-plugin-jsx-a11y": "^6.2.3", "eslint-plugin-react": "^7.26.1", "source-map-explorer": "^2.3.1" }, "peerDependencies": { "postcss": "^8.4.5" }, "scripts": { "analyze": "source-map-explorer build/static/js/main.*", "start": "mkdir -p dist/static && node eb_app_config && npm run build:new && node app", "start:test": "npm run test:nowatch && npm run start", "copy:js:new": "copy .\\build\\static\\js\\main*.js >> .\\dist\\components.new.js", "copy:css:new": "copy .\\build\\static\\css\\main*.css .\\dist\\components.new.css", "copy:build:new": "npm run copy:global:new && npm run copy:js:new && npm run copy:css:new ", "copy:global:new": "copy .\\dist\\global-functions.js > .\\dist\\components.new.js", "copy:media": "copy -r .\\build\\static\\media .\\dist\\static\\media", "build:new": "node set-build-bundle index-new-ux.js && NODE_ENV='production' react-app-rewired build && npm run copy:build:new", "start:dev:new": "node set-build-bundle index-new-ux.js && NODE_ENV='development' DISABLE_ESLINT_PLUGIN=true react-app-rewired start", "test": "react-app-rewired test --env=jsdom", "test:nowatch": "node eb_app_config && CI=true react-app-rewired test --env=jsdom", "eject": "react-app-rewired eject", "test:lint": "eslint . --ext .js" }, "eslintConfig": { "extends": "react-app" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "babel": { "env": { "test": { "plugins": [ [ "@babel/plugin-proposal-decorators", { "legacy": true } ] ] } } } }
Hi @hrgondaliya apologies for the slow response, I am going to take a look at this issue now and see what I can learn. PostCSS Prefix Wrap should be supporting both version 7 and 8 of PostCSS.
I have attempted to use your package.json to reproduce the issue but I am unable to. To get a successful install, I needed to remove the pro font awesome packages, along with modifying the graphql version otherwise the Install did not complete.
After I had a successful install, I modified the postcss version to target v7. This necessitated an update to the postcss-cli version so that it allowed for an older postcss version.
I have attached the package.json and package-lock.json that I was able to successfully install PostCSS v7.
Hopefully this helps you resolve your issue.
@dbtedman Thanks for you response.
I have used your package.json file. but with this I am getting bellow error on build my project. also, I have to add pro font awesome packages to package.json as those are par of my project.
error right now I am facing on "npm run build:new"
Error:
Creating an optimized production build...
Failed to compile.
static/css/main.e5401cd2.css from Css Minimizer plugin
Error: PostCSS plugin postcss-discard-comments requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
Here is the final package.json which I am using.
package.txt
@hrgondaliya seems to be failing regarding https://www.npmjs.com/package/postcss-discard-comments plugin having a minimum peer dependency for PostCSS v8, you can see this In GitHub https://github.com/cssnano/cssnano/blob/master/packages/postcss-discard-comments/package.json.
I don't see this in your package.json so it must be a dependency of a dependency.
Unless I am missing something, your best next move would be to try and track down which of your dependencies is depending on postcss-discard-comments, and see if you can use an earlier version that still supports PostCSS v7.
Apologies I cannot help more, best of luck with resolving this issue.
@dbtedman Thanks for your support.
As you say that your package will work for both the 7 and 8 versions. Then why it's not working with PostCSS v8? Can you please provide a solution with PostCSS v8 then that will be great for our fix?
{ "name": "components-web", "version": "0.1.0", "private": true, "dependencies": { "@babel/plugin-proposal-decorators": "^7.8.3", "@e-builder/react-components": "^1.0.41", "@fortawesome/fontawesome-svg-core": "^1.2.36", "@fortawesome/free-regular-svg-icons": "^5.12.1", "@fortawesome/free-solid-svg-icons": "^5.15.4", "@fortawesome/pro-light-svg-icons": "^5.12.1", "@fortawesome/pro-regular-svg-icons": "^5.12.1", "@fortawesome/pro-solid-svg-icons": "^5.15.4", "@fortawesome/react-fontawesome": "^0.1.8", "ajv": "^6.12.0", "antd": "^4.16.13", "apollo-boost": "^0.4.9", "aws-sdk": "^2.997.0", "axios": "^0.21.4", "bluebird": "^3.7.2", "cluster": "^0.7.7", "compression": "^1.7.1", "cookie-parser": "^1.4.3", "core-js": "^2.6.11", "cors": "^2.8.5", "crypto-js": "^3.3.0", "customize-cra": "^0.6.1", "evaporate": "^2.1.4", "express": "^4.16.2", "file-saver": "^1.3.8", "graphql": "^16.2.0", "helmet": "^3.21.3", "immutability-helper": "^3.0.1", "jquery": "^3.5.1", "mobx": "^4.15.4", "mobx-react": "^5.2.0", "moment": "^2.22.2", "morgan": "^1.9.0", "postcss-prefixwrap": "^1.13.1", "primeicons": "^1.0.0", "primereact": "^3.4.0", "prop-types": "^15.6.1", "qrcode.react": "^0.9.3", "react": "^16.12.0", "react-apollo": "^2.1.9", "react-app-rewire-postcss": "^3.0.2", "react-app-rewired": "^2.1.5", "react-compound-timer": "^1.1.15", "react-dom": "^16.12.0", "react-resizable": "^3.0.4", "react-scripts": "^5.0.0", "react-test-renderer": "^16.12.0", "react-transition-group": "^2.9.0", "typescript": "^4.4.3", "validator": "^13.7.0" }, "devDependencies": { "eslint": "^7.32.0", "eslint-config-airbnb": "18.2.1", "eslint-plugin-import": "^2.20.1", "eslint-plugin-jest": "^22.21.0", "eslint-plugin-jsx-a11y": "^6.2.3", "eslint-plugin-react": "^7.26.1", "source-map-explorer": "^2.3.1" }, "scripts": { "analyze": "source-map-explorer build/static/js/main.*", "start": "mkdir -p dist/static && node eb_app_config && npm run build:new && node app", "start:test": "npm run test:nowatch && npm run start", "copy:global:new": "copy .\\dist\\global-functions.js > .\\dist\\components.new.js", "copy:media": "cp -r ./build/static/media ./dist/static/media || :", "copy:js:new": "copy .\\build\\static\\js\\main*.js >> .\\dist\\components.new.js", "copy:css:new": "copy .\\build\\static\\css\\main*.css .\\dist\\components.new.css", "copy:build:new": "npm run copy:global:new && npm run copy:js:new && npm run copy:css:new", "build:new": "node set-build-bundle index-new-ux.js && NODE_ENV='production' DISABLE_ESLINT_PLUGIN=true react-app-rewired build && npm run copy:build:new", "start:dev:new": "node set-build-bundle index-new-ux.js && NODE_ENV='development' DISABLE_ESLINT_PLUGIN=true react-app-rewired start", "test": "react-app-rewired test --env=jsdom", "test:nowatch": "node eb_app_config && CI=true react-app-rewired test --env=jsdom", "eject": "react-app-rewired eject", "test:lint": "eslint . --ext .js" }, "eslintConfig": { "extends": "react-app" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "babel": { "env": { "test": { "plugins": [ [ "@babel/plugin-proposal-decorators", { "legacy": true } ] ] } } } }