The package grunt does not satisfy its siblings' peerDependencies requirements - javascript

I am trying to create my grunt build but stuck in following error
npm WARN package.json Dependency 'grunt' exists in both dependencies and devDependencies, using 'grunt#~0.4.2' from dependencies
npm ERR! Darwin 13.4.0
npm ERR! argv "node" "/usr/local/bin/npm" "install"
npm ERR! node v0.12.0
npm ERR! npm v2.5.1
npm ERR! code EPEERINVALID
npm ERR! peerinvalid The package grunt does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer grunt-contrib-requirejs#0.4.4 wants grunt#~0.4.0
npm ERR! peerinvalid Peer grunt-config#0.1.8 wants grunt#~0.4.0
npm ERR! peerinvalid Peer grunt-string-replace#0.2.8 wants grunt#~0.4.1
npm ERR! peerinvalid Peer grunt-contrib-clean#0.5.0 wants grunt#~0.4.0
npm ERR! peerinvalid Peer grunt-contrib-cssmin#0.10.0 wants grunt#~0.4.1
npm ERR! peerinvalid Peer grunt-contrib-jshint#0.11.0 wants grunt#~0.4.5
npm ERR! peerinvalid Peer grunt-contrib-uglify#0.8.0 wants grunt#>=0.4.0
npm ERR! peerinvalid Peer grunt-exec#0.4.6 wants grunt#~0.4
As here mentioned, I uninstalled my node,npm and grunt and reinstalled them but still facing same issue ?
Any idea ?
My JSON dependencies are :
"dependencies": {
"grunt": "~0.4.2",
"grunt-contrib-requirejs": "~0.4.1",
"grunt-config": "~0.1.4",
"grunt-string-replace": "~0.2.7",
"grunt-contrib-clean": "~0.5.0",
"grunt-contrib-cssmin": "~0.10.0"
},
"devDependencies": {
"grunt": "0.4.2",
"grunt-cli": "0.1.13",
"grunt-contrib-jshint": ">0.8.0",
"grunt-contrib-uglify": ">0.3.2",
"load-grunt-tasks": ">=0.3.0",
"requirejs": ">=2.1.10",
"grunt-exec": "~0.4.5"
}
Same thing is working fine for my colleague.

I had a similar error like this today, and fixed it by upgrading npm:
npm install -g npm
I had version 2.14 and after upgrading it became 3.8

You declared grunt dependency twice. One for development and one that is not. You also have a different version rule for both. This is what causes the conflict.
You should remove one of these. (usually grunt is part of devdependencies)
dependencies
"grunt": "~0.4.2",
devDependencies
"grunt": "0.4.2",
Edit:
I tested it, this solves the problem:
"dependencies": {
"grunt-contrib-requirejs": "~0.4.1",
"grunt-config": "~0.1.4",
"grunt-string-replace": "~0.2.7",
"grunt-contrib-clean": "~0.5.0",
"grunt-contrib-cssmin": "~0.10.0"
},
"devDependencies": {
"grunt": "~0.4.2",
"grunt-cli": "0.1.13",
"grunt-contrib-jshint": ">0.8.0",
"grunt-contrib-uglify": ">0.3.2",
"load-grunt-tasks": ">=0.3.0",
"requirejs": ">=2.1.10",
"grunt-exec": "~0.4.5"
}

Updating all my global npm packages fixed the issue for me:
npm update -g

Related

error occured when do npm install && npm run dev - Vite - Laravel UI React

hello everyone today i had a problem that's when i install laravel ui with react and pass to the step of npm install an error occured so below you will find the error
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\E495\AppData\Local\npm-cache\_logs\2023-01-16T08_08_36_872Z-debug-0.log
PS C:\Users\E495\Desktop\laravel-simple-crud> npm install
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: undefined#undefined
npm ERR! Found: vite#4.0.4
npm ERR! node_modules/vite
npm ERR! dev vite#"^4.0.4" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer vite#"^3.0.0" from #vitejs/plugin-react#2.2.0
npm ERR! node_modules/#vitejs/plugin-react
npm ERR! dev #vitejs/plugin-react#"^2.2.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.
npm ERR!
npm ERR! See C:\Users\E495\AppData\Local\npm-cache\eresolve-report.txt for a full report.
so above the error and below you'll find my package.json
{
"private": true,
"scripts": {
"dev": "vite",
"build": "vite build"
},
"devDependencies": {
"#popperjs/core": "^2.11.6",
"#tailwindcss/forms": "^0.5.2",
"#vitejs/plugin-react": "^2.2.0",
"alpinejs": "^3.4.2",
"autoprefixer": "^10.4.2",
"axios": "^1.1.2",
"bootstrap": "^5.2.3",
"laravel-vite-plugin": "^0.7.2",
"lodash": "^4.17.19",
"postcss": "^8.4.6",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"sass": "^1.56.1",
"tailwindcss": "^3.1.0",
"vite": "^4.0.4"
}
}
i try to read the error and change the vite version to 4.0.4 but without any result
You should be able to get by this error with the following command:
npm install --legacy-peer-deps
This previous post goes into detail about what --legacy-peer-deps is doing here.
In short, #vitejs/plugin-react (specifically the version 2.2.0 you have as a dev dependency) has listed an older version of vite (vite#"^3.0.0") as one of its peer dependencies, but it is finding the newer vite#"^4.0.4" installed. For reasons that I can't totally explain (see the linked post or Google if you're curious), NPM is not able to resolve this peer dependency conflict as it usually would for the regular dependencies and dev dependencies that we're more familiar with. --legacy-peer-deps gets around this by bypassing peer dependency auto-installation.

Loading pages is extremely slow in dev mode in Next.js (30s+), what could be causing this?

QUESTION:
Running into the following issue essentially (but with different files) : https://github.com/vercel/next.js/discussions/17977
Tried everything suggested there already.
Here is what a page load looks like in dev mode:
Would anyone have any suggestions on how to optimise this?
CODE:
next.config.js:
const withPlugins = require('next-compose-plugins');
const webpack = require("webpack")
const withBundleAnalyzer = require('#next/bundle-analyzer')({
enabled: process.env.ANALYZE === 'true',
})
const withTM = require('next-transpile-modules')(['swr']);
nextConfig = {
images: {
domains: ['storage.googleapis.com'],
},
webpack: config => {
config.resolve.extensions = [ '.mjs', '.js', '.jsx', '.json' ];
config.plugins.push(
new webpack.ProgressPlugin((percentage, message, ...args) => {
// e.g. Output each progress message directly to the console:
console.info(percentage, message, ...args);
})
);
return config
}
}
module.exports = withPlugins([
withBundleAnalyzer,
withTM
], nextConfig);
Tried commenting out everything in next.config.js before doing npm run dev but did not change anything.
js.config.json
{
"compilerOptions": {
"baseUrl": "."
},
"exclude": [
"/node_modules"
]
}
package.json
{
"name": "...",
"version": "0.0.1",
"private": true,
"scripts": {
"dev": "next dev -p 3222",
"build": "next build",
"start": "next start",
"analyze": "cross-env ANALYZE=true next build",
"analyze:server": "cross-env BUNDLE_ANALYZE=server next build",
"analyze:browser": "cross-env BUNDLE_ANALYZE=browser next build"
},
"dependencies": {
"#emotion/cache": "^11.4.0",
"#emotion/react": "^11.4.0",
"#emotion/styled": "^11.3.0",
"#iconify/icons-ant-design": "^1.1.0",
"#iconify/icons-eva": "^1.1.0",
"#iconify/icons-ic": "^1.1.3",
"#iconify/react": "^1.1.4",
"#material-ui/core": "^5.0.0-alpha.34",
"#material-ui/icons": "^5.0.0-alpha.34",
"#material-ui/lab": "^5.0.0-alpha.34",
"#material-ui/styles": "^5.0.0-alpha.33",
"#next/bundle-analyzer": "^11.0.1",
"#sendgrid/mail": "^7.4.5",
"apexcharts": "^3.27.1",
"axios": "^0.21.1",
"change-case": "^4.1.2",
"cross-env": "^7.0.3",
"date-fns": "^2.21.1",
"emoji-mart": "^3.0.1",
"firebase-admin": "^9.9.0",
"framer-motion": "^4.1.17",
"lodash": "^4.17.21",
"millify": "^4.0.0",
"next": "^11.0.1",
"next-compose-plugins": "^2.2.1",
"next-transpile-modules": "^8.0.0",
"nprogress": "^0.2.0",
"numeral": "^2.0.6",
"prop-types": "^15.7.2",
"react": "17.0.2",
"react-apexcharts": "^1.3.9",
"react-dom": "17.0.2",
"react-icons": "^4.2.0",
"react-load-script": "^0.0.6",
"react-scroll": "^1.8.2",
"react-tradingview-widget": "^1.3.2",
"sanitize-html": "^2.4.0",
"sass": "^1.35.2",
"simplebar": "^5.3.0",
"simplebar-react": "^2.3.0",
"swr": "^0.5.6"
}
}
BUNDLE ANALYSIS:
Client
Server
WEBPACK PROGRESS PLUGIN OUTPUT AND OTHER TERMINAL OUTPUT:
https://pastebin.com/PAfudkdg
ERROR WHEN DOING NPM INSTALL:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: fintex#0.0.1
npm ERR! Found: react#17.0.2
npm ERR! node_modules/react
npm ERR! react#"17.0.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"^16.0.0" from react-tradingview-widget#1.3.2
npm ERR! node_modules/react-tradingview-widget
npm ERR! react-tradingview-widget#"^1.3.2" 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.
TERMINAL OUTPUT WHEN DOING NPM INSTALL --FORCE:
npm WARN using --force Recommended protections disabled.
npm WARN ERESOLVE overriding peer dependency
npm WARN Found: react#17.0.2
npm WARN node_modules/react
npm WARN react#"17.0.2" from the root project
npm WARN 14 more (#emotion/react, #emotion/styled, #material-ui/core, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react#"^16.0.0" from react-tradingview-widget#1.3.2
npm WARN node_modules/react-tradingview-widget
npm WARN react-tradingview-widget#"^1.3.2" from the root project
npm WARN ERESOLVE overriding peer dependency
npm WARN Found: react-dom#17.0.2
npm WARN node_modules/react-dom
npm WARN react-dom#"17.0.2" from the root project
npm WARN 5 more (#material-ui/core, #material-ui/lab, framer-motion, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react-dom#"^16.0.0" from react-tradingview-widget#1.3.2
npm WARN node_modules/react-tradingview-widget
npm WARN react-tradingview-widget#"^1.3.2" from the root project
npm WARN ERESOLVE overriding peer dependency
npm WARN Found: react#17.0.2
npm WARN node_modules/react
npm WARN react#"17.0.2" from the root project
npm WARN 14 more (#emotion/react, #emotion/styled, #material-ui/core, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react#"^0.14.9 || ^15.3.0 || ^16.0.0-rc || ^16.0" from simplebar-react#2.3.5
npm WARN node_modules/simplebar-react
npm WARN simplebar-react#"^2.3.0" from the root project
npm WARN ERESOLVE overriding peer dependency
npm WARN Found: react-dom#17.0.2
npm WARN node_modules/react-dom
npm WARN react-dom#"17.0.2" from the root project
npm WARN 5 more (#material-ui/core, #material-ui/lab, framer-motion, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react-dom#"^0.14.9 || ^15.3.0 || ^16.0.0-rc || ^16.0" from simplebar-react#2.3.5
npm WARN node_modules/simplebar-react
npm WARN simplebar-react#"^2.3.0" from the root project
npm WARN deprecated querystring#0.2.1: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated querystring#0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated react-load-script#0.0.6: abandoned and unmaintained
added 621 packages, and audited 622 packages in 55s
73 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
I would recommend to separate the dependencies with devDependencies
like these packages are should be inside devDependencies
prop-types #next/bundle-analyzer cross-env next-compose-plugins next-transpile-modules
and I think you can remove
const withTM = require('next-transpile-modules')(['swr']);
from the next.config.js -- but not sure it will give you errors or not, I have never put swr into transpile modules before.
and for loading 3rd parties script, try using the new next11 component, rather than using other libraries (https://nextjs.org/docs/basic-features/script)
other that that, I would recommend that you can remove react-icons and use the iconify/eva for the replacement - It is just to reduce same usage library..
Cheers man 😊. It is a hard to optimize loading time and speed for dev or production nevertheless.. can't never be too cautious for any opportunities to improve it.

Webpack and webpack-dev-server installation error

I'm trying to install a Webpack and Babel to use React without CRA.
During installation webpack-dev-server, I've facing with some dependencies problems
PS C:\Users\Lebedev\Desktop\projects\frontend-graduation-project> npm install --save-dev webpack-dev-server
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: webpack#5.4.0
npm ERR! node_modules/webpack
npm ERR! peer webpack#">=2" from babel-loader#8.2.1
npm ERR! node_modules/babel-loader
npm ERR! dev babel-loader#"^8.2.1" from the root project
npm ERR! peer webpack#"^4.27.0 || ^5.0.0" from css-loader#5.0.1
npm ERR! node_modules/css-loader
npm ERR! dev css-loader#"^5.0.1" from the root project
npm ERR! 6 more (html-webpack-plugin, style-loader, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer webpack#"^4.0.0" from webpack-dev-middleware#3.7.2
npm ERR! node_modules/webpack-dev-server/node_modules/webpack-dev-middleware
npm ERR! webpack-dev-middleware#"^3.7.2" from webpack-dev-server#3.11.0
npm ERR! node_modules/webpack-dev-server
npm ERR! dev webpack-dev-server#"*" 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.
npm ERR!
npm ERR! See C:\Users\Lebedev\AppData\Local\npm-cache\eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Lebedev\AppData\Local\npm-cache\_logs\2020-11-15T12_42_34_324Z-debug.log
PS C:\Users\Lebedev\Desktop\projects\frontend-graduation-project>
My package.json file:
"dependencies": {
"react": "^17.0.1",
"react-dom": "^17.0.1"
},
"devDependencies": {
"#babel/core": "^7.12.3",
"#babel/preset-env": "^7.12.1",
"#babel/preset-react": "^7.12.5",
"babel-loader": "^8.2.1",
"css-loader": "^5.0.1",
"html-webpack-plugin": "^4.5.0",
"style-loader": "^2.0.0",
"webpack": "^5.4.0",
"webpack-cli": "^4.2.0"
}
What I already did and it still not help:
Tried remove node_modules folder
Tried remove package-lock.json file
Reinstall npm dependencies by running this command: npm install
How to solve this problems?
Thanks for any advice
I found the answer on a Github Issue page: https://github.com/npm/cli/issues/2119
My npm version has been 7.0.8. As a mvyunko mention in issue, I just type the following:
npm install npm#latest -g
npm install webpack-dev-server --save-dev
After all commands, my npm version has been changed to 6.14.8, and installation error has gone.

Can't install react-transition-group

Trying to install react-transition-group but get the following error
npm install react-transition-group#1.x --save
npm ERR! peerinvalid The package react#15.6.1 does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer react-bootstrap#0.31.0 wants react#^0.14.9 || >=15.3.0
npm ERR! peerinvalid Peer react-dom#15.6.1 wants react#^15.6.1
npm ERR! peerinvalid Peer react-fontawesome#1.6.1 wants react#>=0.12.0
npm ERR! peerinvalid Peer react-redux#5.0.5 wants react#^0.14.0 || ^15.0.0-0 || ^16.0.0-0
npm ERR! peerinvalid Peer react-router#4.1.1 wants react#^15
npm ERR! peerinvalid Peer react-router-dom#4.1.1 wants react#^15
npm ERR! peerinvalid Peer react-simple-currency#1.0.15 wants react#^0.14.0
npm ERR! peerinvalid Peer react-transition-group#1.2.0 wants react#^15.0.0
The current dependencies in packages.json are
"dependencies": {
"accounting": "0.4.1",
"babel-runtime": "^6.20.0",
"css-loader": "0.28.2",
"history": "4.6.1",
"immutable": "3.8.1",
"jsonapi-serializer": "3.5.3",
"numeral": "2.0.6",
"prop-types": "15.5.10",
"react": "^15.3.0",
"react-bootstrap": "0.31.0",
"react-dom": "^15.4.1",
"react-fontawesome": "1.6.1",
"react-redux": "5.0.5",
"react-router": "4.1.1",
"react-router-dom": "4.1.1",
"redux": "3.6.0",
"sprintf-js": "1.1.1",
"style-loader": "0.18.1",
"superagent": "3.5.2",
"superagent-no-cache": "0.1.1",
"zpad": "0.5.0"
},
Updated npm npm install npm -g
Cleared cache: npm cache clear
Removed node_modules rm -rf node_modules
Reinstalled node_modules, npm install.
just execute the command:
npm install react-transition-group
and it will work.

npm not install underscore packages

I want to install packages with npm:
my packages file is:
"dependencies": {
"express": "~3.3.6",
"socket.io": "0.9.16",
"jade": "~0.35.0",
"less-middleware": "~0.1.12",
"redis": "~0.8.4",
"connect-redis": "~1.4.5",
"longjohn": "~0.2.1",
"mongoose": "~3.6.20",
"json-stringify-safe": "~5.0.0"
},
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-uglify": "~0.2.2",
"grunt-nodemon": "~0.1.0",
"grunt-contrib-jshint": "~0.6.3",
"grunt-contrib-less": "~0.7.0",
"grunt-ngmin": "0.0.3"
}
}
but i have this error :
npm http 304 https://registry.npmjs.org/underscore.string
npm ERR! Error: No compatible version found: underscore.string#'~2.2.0rc'
npm ERR! Valid install targets:
npm ERR! ["0.9.2","1.0.0","1.1.3","1.1.4","1.1.5","1.1.6","2.0.0","2.1.0","2.1.1","2.3.0","2.3.1","2.3.2","2.2.1","2.2.0-rc","2.3.3"]
npm ERR! at installTargetsError (/usr/share/npm/lib/cache.js:685:10)
npm ERR! at /usr/share/npm/lib/cache.js:607:10
npm ERR! at saved (/usr/share/npm/node_modules/npm-registry-client/lib/get.js:138:7)
npm ERR! at /usr/lib/nodejs/graceful-fs/polyfills.js:133:7
npm ERR! at Object.oncomplete (fs.js:107:15)
npm ERR! If you need help, you may report this log at:
npm ERR! <http://bugs.debian.org/npm>
npm ERR! or use
npm ERR! reportbug --attach /home/vahid/Workspace/talkie/npm-debug.log npm
npm ERR! System Linux 3.11.0-12-generic
npm ERR! command "/usr/bin/nodejs" "/usr/bin/npm" "install"
npm ERR! cwd /home/vahid/Workspace/talkie
npm ERR! node -v v0.10.15
npm ERR! npm -v 1.2.18
how i can fix this error? thanks!
If you have a Grunt version that has not yet applied this patch, then you will get that error due to a mistype where this line in the package.json:
underscore.string#'~2.2.0rc
Should instead be this:
underscore.string#'~2.2.0-rc
To fix this problem, use a newer version of Grunt.
in package.json change sails ">0.9"
and grunt ">0.4.1"
thats all

Categories

Resources