Not able to do npm install while upgrade the venia version #4375
Description
I am trying to upgrade the PWA version to 14.1.0 and the Node.js version from 16 to 18. I have removed yarn.lock and package-lock.json and node_modules However, when I run npm install, I encounter the following error:
While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/webpack
npm ERR! dev webpack@"~4.46.0" from the root project
npm ERR! peer webpack@"~4.46.0" from @magento/[email protected]
npm ERR! node_modules/@magento/pwa-buildpack
npm ERR! dev @magento/pwa-buildpack@"~11.4.2" from the root project
npm ERR! peer @magento/pwa-buildpack@"~11.4.2" from @magento/[email protected]
npm ERR! node_modules/@magento/upward-security-headers
npm ERR! dev @magento/upward-security-headers@"1.0.14" from the root project
npm ERR! 1 more (@magento/venia-ui)
npm ERR! 43 more (@pmmmwh/react-refresh-webpack-plugin, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer webpack@"^2.0.0 || ^3.0.0" from [email protected]
npm ERR! node_modules/compression-webpack-plugin
npm ERR! compression-webpack-plugin@"1.0.0" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/webpack
npm ERR! peer webpack@"^2.0.0 || ^3.0.0" from [email protected]
npm ERR! node_modules/compression-webpack-plugin
npm ERR! compression-webpack-plugin@"1.0.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
I am sharing the package.json
"dependencies": {
"@algolia/autocomplete-js": "1.7.1",
"@algolia/recommend": "4.14.3",
"@algolia/recommend-react": "1.8.1",
"@datadog/browser-rum": "^4.34.2",
"@emotion/react": "^11.10.4",
"@emotion/styled": "^11.10.4",
"@googlemaps/markerclusterer": "^2.0.13",
"@heroicons/react": "^1.0.6",
"algoliasearch": "4.14.1",
"autoprefixer": "^10.4.20",
"axios": "^0.21.1",
"axios-cache-adapter": "^2.7.3",
"compression-webpack-plugin": "1.0.0",
"emoji-js": "^3.8.0",
"emojione": "^4.5.0",
"google-libphonenumber": "^3.2.32",
"js-file-download": "^0.4.12",
"postcss-google-font": "^1.1.0",
"react-cookie": "^4.1.1",
"react-datepicker": "^4.8.0",
"react-device-detect": "^2.2.2",
"react-dropzone": "^14.2.3",
"react-helmet": "^6.1.0",
"react-instantsearch-hooks-web": "6.30.2",
"react-pay-icons": "3.0.0",
"react-ranger": "^2.1.0",
"react-responsive-carousel": "^3.2.23",
"react-select": "^5.7.0",
"react-star-ratings": "^2.3.0",
"react-text-mask": "^5.4.3",
"react-toggle-slider": "0.3.0",
"react-tooltip": "^5.21.4",
"search-insights": "2.11.0",
"styled-components": "^5.3.5",
"swiper": "^8.4.4"
},
"devDependencies": {
"@adobe/apollo-link-mutation-queue": "~1.0.2",
"@apollo/client": "~3.5.0",
"@babel/core": "~7.15.0",
"@babel/plugin-proposal-class-properties": "~7.14.5",
"@babel/plugin-proposal-object-rest-spread": "~7.14.7",
"@babel/plugin-proposal-optional-chaining": "~7.16.0",
"@babel/plugin-syntax-dynamic-import": "~7.8.3",
"@babel/plugin-syntax-jsx": "~7.2.0",
"@babel/plugin-transform-react-jsx": "~7.14.9",
"@babel/plugin-transform-runtime": "~7.4.4",
"@babel/preset-env": "~7.16.0",
"@babel/runtime": "~7.15.3",
"@graphql-tools/url-loader": "^7.0.0",
"@magento/babel-preset-peregrine": "~1.2.1",
"@magento/eslint-config": "~1.5.0",
"@magento/peregrine": "~13.1.1",
"@magento/pwa-buildpack": "~11.4.2",
"@magento/pwa-theme-venia": "~1.3.0",
"@magento/upward-security-headers": "1.0.14",
"@magento/venia-ui": "~10.2.0",
"@pmmmwh/react-refresh-webpack-plugin": "0.4.1",
"@storybook/react": "~6.3.7",
"@types/node": "16",
"apollo-cache-persist": "~0.1.1",
"babel-core": "~7.0.0-bridge.0",
"babel-eslint": "~10.1.0",
"babel-jest": "~24.1.0",
"babel-loader": "~8.0.5",
"babel-plugin-dynamic-import-node": "~2.3.3",
"babel-plugin-graphql-tag": "~2.0.0",
"babel-plugin-module-resolver": "~3.2.0",
"babel-plugin-react-remove-properties": "~0.3.0",
"braintree-web-drop-in": "~1.33.3",
"clsx": "^1.2.1",
"compression": "~1.7.4",
"css-loader": "~5.2.7",
"dotenv": "~6.2.0",
"eslint": "~7.32.0",
"eslint-config-prettier": "^6.15.0",
"eslint-plugin-babel": "~5.3.0",
"eslint-plugin-graphql": "~4.0.0",
"eslint-plugin-jsx-a11y": "~6.4.1",
"eslint-plugin-node": "~8.0.1",
"eslint-plugin-package-json": "~0.1.3",
"eslint-plugin-react": "~7.21.5",
"eslint-plugin-react-hooks": "~4.2.0",
"eslint-plugin-simple-import-sort": "^7.0.0",
"express": "~4.16.4",
"file-loader": "~4.0.0",
"graphql": "~15.5.0",
"graphql-tag": "~2.12.5",
"graphql-ws": "^5.5.5",
"html-webpack-plugin": "~4.5.2",
"husky": "^8.0.3",
"informed": "~3.29.0",
"jarallax": "~1.11.1",
"load-google-maps-api": "~2.0.1",
"lodash": "~4.17.20",
"lodash.escape": "~4.0.1",
"lodash.get": "~4.4.2",
"lodash.over": "~4.7.0",
"lodash.set": "~4.3.2",
"memoize-one": "~5.0.0",
"memory-fs": "~0.4.1",
"node-fetch": "~2.3.0",
"postcss": "~8.3.6",
"postcss-loader": "~4.3.0",
"prettier": "~1.16.4",
"prop-types": "~15.7.2",
"react": "~17.0.1",
"react-dom": "~17.0.1",
"react-intl": "~5.20.0",
"react-redux": "~7.2.2",
"react-refresh": "0.8.3",
"react-router-dom": "~5.2.0",
"react-slick": "~0.28.0",
"react-tabs": "~3.1.0",
"react-test-renderer": "~17.0.1",
"redux": "~4.0.1",
"redux-actions": "~2.6.4",
"redux-thunk": "~2.3.0",
"rimraf": "~2.6.3",
"style-loader": "~2.0.0",
"subscriptions-transport-ws": "~0.9.19",
"tailwindcss": "^3.4.17",
"terser-webpack-plugin": "~1.2.3",
"uuid": "~8.3.2",
"webpack": "~4.46.0",
"webpack-bundle-analyzer": "~3.3.2",
"webpack-cli": "3.2.3",
"webpack-dev-server": "~3.2.1",
"workbox-cacheable-response": "~6.2.4",
"workbox-core": "~6.2.4",
"workbox-expiration": "~6.2.4",
"workbox-precaching": "~6.2.4",
"workbox-routing": "~6.2.4",
"workbox-strategies": "~6.2.4",
"workbox-webpack-plugin": "~6.2.4"
},
"optionalDependencies": {
"sharp": "~0.29.3"
},
"engines": {
"node": ">=18.x",
"yarn": ">=1.12.0"
},