gatsby with multiple versions of graphql - yarn resolutions - reactjs

I'm starting with Gatsby. Trying to use gatsby-source-pg plugin. But facing issues with multiple graphql versions. I asked author of this plugin about this issue on github and he was very helpful in answering my question.
But may be I'm missing something here..
issue - https://github.com/graphile/gatsby-source-pg/issues/3
Any help is highly appreciated.

Ahh.. finding out correct version is tricky..
I created fresh project with gatsby new <project_name> and did npm install.
Installed plugin with npm install --save gatsby-source-pg
After this I searched for folders named graphql in node_modules and then prepared following resolution list -
"resolutions":{
"eslint-plugin-graphql/graphql": "14.1.1",
"express-graphql/graphql": "14.1.1",
"graphql-tools/graphql": "14.1.1",
"apollo-link/graphql": "14.1.1",
"apollo-utilities/graphql": "14.1.1",
"gatsby-source-graphql/graphql": "14.1.1",
"gatsby-source-pg/graphql": "14.1.1",
"#types/graphql": "14.1.1"
}
But then somehow, when I did yarn install, #types said that it did not like 14.1.1 and and offered a range of versions. I choose the latest one from the presented list, 14.0.7 and went ahead with installation. It still generated warnings as below -
yarn install
yarn install v1.12.3
info No lockfile found.
[1/4] Resolving packages...
Couldn't find any versions for "#types/graphql" that matches "14.1.1"
? Please choose a version of "#types/graphql" from this list: 14.0.7
warning Resolution field "graphql#14.1.1" is incompatible with requested version "graphql#0.13.x"
[2/4] Fetching packages...
info fsevents#1.2.7: The platform "win32" is incompatible with this module.
info "fsevents#1.2.7" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning "gatsby > express-graphql#0.6.12" has incorrect peer dependency "graphql#^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0".
warning "gatsby > eslint-plugin-graphql#2.1.1" has incorrect peer dependency "graphql#^0.12.0 || ^0.13.0".
warning "gatsby > graphql-tools#3.1.1" has incorrect peer dependency "graphql#^0.13.0".
warning "gatsby > pnp-webpack-plugin > ts-pnp#1.0.1" has unmet peer dependency "typescript#*".
warning "gatsby-source-pg > gatsby-source-graphql > apollo-link#1.2.1" has incorrect peer dependency "graphql#^0.11.3 || ^0.12.3 || ^0.13.0".
[4/4] Building fresh packages...
success Saved lockfile.
Done in 37.83s.
But now, I can use GraphiQL playground to execute my graphql queries and in the project as well.
Update:
You can minimize resolutions and just say:
"resolutions": {
"graphql": "14.x"
}
Special thanks to #benji from Postgraphile

Run npm list graphql
Then, check the highest version you found graphql.
After that, add this to your package.json:
"resolutions":{
"graphql": "<highest found version>"
}
Then, delete your package-lock.json and node_modules folder.
Run npm install

Related

peer dependency issue in npm install

I am working on a personal site which uses create-react-app and noticed that after installing MUI, every time i npm install, i get peer dependency errors. I think it might have to do with different library versions i have, but im not really sure what the issue is. I think seeing my package might help someone else understand where the problem lies.
Screenshots of my errors in terminal and my package are here! Please help! :)
enter image description here
enter image description here
i've tried uninstalling mui (which it wont let me do because of other peer dependencies?), changing versions of react, deleting node modules and package lock files, but i keep getting the same 'unable to resolve dependency tree'
9:16
--force seems to work temporarily but it seems like its not the actual solution because i still cant install libraries 'naturally'
This is sometimes what I use when dealing with peer dependency problems.
install the version of the peer dependency I need locally to the package.json.
install this npm package: npm-force-resolutions
devDependencies: {
"npm-force-resolutions": "0.0.3" //I'm sure there is a more modern update by now!
}
Provide an additional item - "resolutions" - in the package.json pointing to that peer dependency.
package.json
{
"resolutions": {
"minimist": "1.2.5"
},
"dependencies": {
"minimist": "1.2.5",
}
}
And then add a script which runs after every time you install something new .
"scripts": {
"preinstallAfter": "node ./node_modules/npm-force-resolutions/index.js",
}
Then re-install
(Note: npm ci is better because it does not try to install minor variations of package files. It takes only what is explicitly declared in your package-lock.json file. That way its consistent if sharing on a repo between different operating systems. )
npm ci
Hope it helps

Why is eslint version 5.6.0 throwing an error while running build?

the react-scripts package provided by create react app requires a dependency eslint ^5.6.0.
it says that another version was detected higher up in the tree (version: 8.30.0) the latest I've installed. If I install the 5.6 version I get other errors instead of fixing it.
I've also tried the SKIP_PREFLIGHT in a .env file with no success. As well as the troubleshooting from the terminal (removedd the node module folder and npm install again).
Here are some of the things I've tried
craco: cannot find eslint loader (eslint-loader) - lastest error showing up
reintalled eslint (lastest version)
installed eslint different versions to match with the ones in the file
Reinstalled google-auth-library
troubleshooting from terminal (React Suggestions):
- Removed node_modules from user and ran npm install (install all node modules again)
- Added the SKIP_PREFLIGHT .env
- Under Package.json removed and added again the eslintConfig / changed "eslint": "8.31" to recommended one (version 7)
- Deleted package-lock (added back after no success)
- devDependencies Removed ESLint (added back after no success)
- npm audit
From StackOverflow:
- Added to craco eslint: { enable: false},
- Updated npm
- Changed craco version to 6.4
- npm install -D eslint to install in the devDependecy
- Added module: rules on craco
- downgraded to npm install webpack#5.75.0
New error messages: craco cannot find ESLint loader (eslint-loader) - eslint-loader is deprecated, tried installing eslint-webpack-plugin.. same problem
Any ideas about what might be happening?
I had multiple versions of eslint - the problem went away when I updated to version 8 (updating the manifest as well)

create-react-app (Found incompatible module)

I have this problem on create-react-app
my node version 10.16.3
my npm version 6.9.0
npx create-react-app mac
Creating a new React app in /home/brian/Documentos/mac/mac.
warning You are using Node "13.0.0-nightly20190802452b393c1f" which is not supported and may encounter bugs or unexpected behavior. Yarn supports the following semver range: "^4.8.0 || ^5.7.0 || ^6.2.2 || >=8.0.0"
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts...
yarn add v1.17.3
warning You are using Node "13.0.0-nightly20190802452b393c1f" which is not supported and may encounter bugs or unexpected behavior. Yarn supports the following semver range: "^4.8.0 || ^5.7.0 || ^6.2.2 || >=8.0.0"
[1/4] Resolving packages...
[2/4] Fetching packages...
error #babel/core#7.5.5: The engine "node" is incompatible with this module. Expected version ">=6.9.0". Got "13.0.0-nightly20190802452b393c1f"
error Found incompatible module.
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.
Aborting installation.
yarnpkg add --exact react react-dom react-scripts --cwd /home/brian/Documentos/mac/mac has failed.
Deleting generated file... package.json
Deleting generated file... yarn.lock
Deleting mac/ from /home/brian/Documentos/mac
Done.
create-react-app react-app --use-npm
This worked for me
It appears the node version you're using isn't compatible. Can you try using node 10 or 12? I suggest using nvm to manage the different node versions.
Many packages define an explicit node version in their package.json. For example, in #babel/core:
"engines": {
"node": ">=6.9.0"
},
It seems your node version: 13.0.0-nightly20190802452b393c1f isn't valud for these requirements.
You can see the source in yarn that handles this.
You can see here that it appears the semver package does not handle this:
import semver from "semver";
console.log(semver.satisfies("13.0.0", ">=6.9.0")); // true
console.log(semver.satisfies("13.0.0-nightly20190802452b393c1f", ">=6.9.0")); // false

Fix React-script version vulnerability result in webpack dependency error

A while ago, I have encountered a npm vulnerability called "Missing Origin Validation".
The message was following:
High Missing Origin Validation
Package webpack-dev-server
Dependency of react-scripts
Path react-scripts > webpack-dev-server
More info https://nodesecurity.io/advisories/725
When I follow NPM's instruction and fixed it by run npm install react-scripts#2.1.1. It was fine.
Recently, on my other branch(Lets call it branch test) I installed webpack for some purpose. Even though the webpack was technically only installed in my test branch, when I switch to my master branch, this happened:
The react-scripts package provided by Create React App requires a dependency:
"webpack": "4.19.1"
Don't try to install it manually: your package manager does it automatically.
However, a different version of webpack was detected higher up in the tree:
C:\Users\pzheng\my-app\node_modules\webpack (version: 4.25.1)
I dont see webpack installed in my master branch's package.json. However, I still followed the NPM's instruction: deleted my package-lock.json and node_modules then I ran npm install
It fixed,but then the Missing Origin Validation vulnerability appears again. I am running into a cycle at this point. In the future the test branch will be merged. Then I need to pick a version. However, either version will cause an error.
Any help is appreciated.

Unusual error when running create-react-app in terminal on Mac

I have never had an error before running create-react-app, but when I have run it on my Mac today I keep getting the below error and have not been able to resolve it. I've tried updating node, Yarn, eslint, CRA, and also clearing the node cache and nothing works. Why is this error occurring and how can I resolve it so I can install create-react-app?
Creating a new React app in /Users/...
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts...
yarn add v1.10.1
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
error eslint#5.6.0: The engine "node" is incompatible with this module. Expected version "^6.14.0 || ^8.10.0 || >=9.10.0". Got "9.3.0"
error Found incompatible module
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.
Aborting installation.
yarnpkg add --exact react react-dom react-scripts --cwd /Users/johnwolfe/printPackageTest/printtest has failed.
Deleting generated file... package.json
Deleting generated file... yarn.lock
Deleting printtest/ from /Users/johnwolfe/printPackageTest
Done.
Error
error eslint#5.6.0: The engine "node" is incompatible with this
module. Expected version "^6.14.0 || ^8.10.0 || >=9.10.0". Got "9.3.0"
error Found incompatible module
Question
Why is this error occurring and how can I resolve it so I can install
create-react-app?
Answer
You might consider updating your NodeJS version :) It's quite clear that it's an incompatible issue between your NodeJS and the create-react-app
I was facing the same issue, try to add "--use-npm" at the end of create react app commend.
create-react-app appname --use-npm
Happy hacking!

Resources