How to best manage JavaScript dependencies on a project with least hassle - javascript

I manage few JavaScript ReactJs projects. Two of these projects are rarely updated.
Last week, I updated and deployed these two rarely updated projects (after 14 months) with only two minor changes but the new build had several issues and caused a pain in testing and support.
I fear that yarn install resulted in updating several dependencies (although we have a yarn.lock file) and caused change in behaviour and added issues with it.
Now with this background, I wanted to ask experts here how do they manage their projects that are kept for a long time with no regular updates.
My package.json file looks like:-
"#babel/cli": "^7.1.2",
"#babel/core": "^7.1.2",
"react": "^16.0.0",
"react-dom": "^16.0.0",
"react-google-maps": "^9.4.5",
"react-google-recaptcha": "^1.0.5",
"react-helmet": "^5.2.0",
"react-moment": "^0.7.0",
"react-router-dom": "^4.2.2",
Some example issues I faced: -
1) React Link router was not building correct link for URLs starting with https://. Found out it was a bug in the React dom version and used link starting with :// to fix.
BUT point is, this feature worked fine for years and broke in a recent build.
Do you use ~ or ^ or just bind to a specific version?
Thanks

Related

react-fontawesome Error legacy browers es5

Describe the bug
When trying to run the compiled library in a lesser supported browser like firefox 47 I have a problem of _hooks[hook].push(_hooks[hook]) is not a function. When we look deeper where it finds the error, it finds the error in the watch part. In the newest chrome this watch comes as an array and renders normally. As we came to the conclusion that the error is due to the library, because removing it the page renders normally in this old browser.
Reproducible test case
We are using vite as the compilation tool. So just run a yarn run build and after that run a yarn run preview and so when testing in an older browser the page will not render, giving an error in the function mentioned above.
enter image description here
Expected behavior
From expectations I wanted help on how to resolve this error, if anyone has already experienced it, if it is just to adjust something in the vite compilation configuration, I already find myself out of ideas.
Desktop (please complete the following information):
Browser Firefox 47
Version
"#fortawesome/fontawesome-svg-core": "^6.2.0",
"#fortawesome/free-regular-svg-icons": "^6.2.0",
"#fortawesome/free-solid-svg-icons": "^6.2.0",
"#fortawesome/pro-duotone-svg-icons": "^6.2.0",
"#fortawesome/pro-light-svg-icons": "6.2.0",
"#fortawesome/pro-regular-svg-icons": "^6.2.0",
"#fortawesome/pro-solid-svg-icons": "^6.2.0",
"#fortawesome/react-fontawesome": "^0.2.0",
From expectations I wanted help on how to resolve this error, if anyone has already experienced it, if it is just to adjust something in the vite compilation configuration, I already find myself out of ideas.

Invariant Violation: requireNativeComponent: "RNSVGSvgViewAndroid" was not found in the UIManager in Android

I am using expo sdk 47 Managed Workflow and try to build project with UI Kitten Framework
https://akveo.github.io/react-native-ui-kitten/
On iOS everything works fine.
On Android I have an issue Invariant Violation: requireNativeComponent: "RNSVGSvgViewAndroid" was not found in the UIManager.
Trying t find the solution and no luck.
Reinstalled everything several times.
I have
"#ui-kitten/components": "^5.1.2",
"expo": "~47.0.8",
"react": "18.1.0",
"react-native-svg": "^13.6.0",
The issue is with latest versions of expo SDK. Any ideas how to fix?
Does anybody has the same?
I found only this fresh question but it is related with another library and solution does not work for me.
Invariant Violation: requireNativeComponent: "RNSVGSvgViewAndroid" was not found in the UIManager
also tried with "react-native-svg": "^13.4.0" which is recommended by expo sdk47 but has another error (https://github.com/software-mansion/react-native-svg/issues/1899) which is recommended to fix by installing 13.5.0 but then I getting initial error.
After spending several days to find solution I have no other ideas rather than to ask here.
I got the error when I used "react-native-svg": "13.6.0", downgrading to "react-native-svg": "13.4.0" solved the issue.
You cannot use "react-native-svg": "13.6.0" with expo sdk 47 Managed Workflow because the native code is compiled there already, and it is compiled with "react-native-svg": "13.4.0" version of native code. Between those versions, the naming of native component changed, so when using "react-native-svg": "13.6.0", you update only the JS code, which tries to get new name of component from the native side, but the native code still has the previous name compiled. It resolves in such an error. Unfortunately there is no solution to this problem in managed workflow, the easiest solution would be to use EAS (https://expo.dev/eas) to build custom version of Expo Go app with "react-native-svg": "13.6.0" compiled in it.
when using expo run:
expo i react-native-svg

Is it a good idea to mix ~ and ^ in package.json

Apologies if the question is too generic, I can make it more specific if required, but want to understand the best practice here.
I am working on a monorepo where each project would have a different version of jest. In the package.json file, all #types are defined with ~ while other packages with ^ (I guess the rationale was that there are more breaking fixes are introduced in #types - not sure it is true). Therefore, I have,
"jest": "^29.0.3",
"#types/jest": "~29.0.3",
In the last few days, I am starting to get some strange issues with picking the right version of jest (even in the other monorepo directories). I also noticed that the latest jest version is now 29.2.0 while the latest #types/jest is 29.1.2 (this should not happen really, no?)
If I change both versions to, say 29.1.2, the problem disappears.
My question, though, is it ok to have different scope definition (~ vs ^) in the corresponding #types and regular packages?
Thanks!
Version mismatches between types and JS packages are relatively normal and shouldn't cause any issues most of the time.

Updating #material-ui/core to version 4.2.0 causes react hook errors

I am creating an electron application using react and material-ui. I just updated material-ui to version 4.2.0. The following lines were added to my dependencies in package.json.
"#material-ui/core": "^4.2.0",
"#material-ui/icons": "^4.2.1",
This was the only change I made and now my app is not working, and crashing with the following error.
Uncaught Invariant Violation: Invalid hook call.
Strangely enough, I am not even using hooks in my react application yet. The error message persists until I remove all usage of material-ui in my application. I have also tried rebuilding my application and regenerating yarn.lock and node_modules but that did not work. I am puzzled with how simply updating material-ui to a newer stable release could cause this error. Has anyone had this problem and/or have a solution? Thank you.
UPDATE:
I tried reproducing the issue on codesandbox.io but it works fine there. That makes me think that something in my environment is not comparable with material-ui. I am using electron-webpack to bundle my application, and am using typescript. I see no reason why this would cause the problem but if anyone can say otherwise I would appreciate any help.
So it seems like the problem for me was in the package.json. If I move
"#material-ui/core": "^4.2.0",
"#material-ui/icons": "^4.2.1",
from dependencies to devDependencies, it works fine. I have no idea why this would cause an error about react hooks, but at least there is a solution.
Check the full error message. You probably have multiple versions of react installed.

How to change Zapier Node Version?

Can anyone tell us how to change the node version used to run a zapier app to node 6.10.2 or later?
Zapier cli docs state that All Zapier CLI apps are run using Node.js v6.10.2.. Our app is built using the cli.
Elsewhere in Zapier docs it states that The environment is vanilla node.js v4.3.2 which runs JavaScript.
We already did z.console.log('node version', process.version); from within the Zapier app so that we can see the node version where it is run. We retrieved this using zapier logs. The version logged is 4.3.2.
Previously our package.json contained:
json
"engines": {
"node": ">=4.3.2",
"npm": ">=2.0.0"
}
We have updated this to:
json
"engines": {
"node": "6.10.2",
"npm": ">=2.0.0"
}
The same applies for the travis.yml which was previously 4.3.2 but is now:
yml
node_js:
- "6.10.2"
Thanks ; )
SOLUTION
As noted in the accepted answer below, zapier cli apps are currently run with node 6.10.x. We changed the node version in our package.json under the engine key to be 6.10.2, but this alone did not change the node version it was run with. The node version was updated when we changed the zapier-platform-core dependency to be 4.3.1 (it was previously 1.x), and logging process.version now shows the version as 6.10.3.
The zapier App does not run in your machine. It only gets built and validated via 'zapier validate' and each time you do 'zapier push'. You only run the optional tests in your machine. So, when CLI checks your app, it runs node 6.10.2 and this is why you need this in your machine. Once your app is uploaded, you do not really care where it runs, but they say it is node 4.3.2
David here, from the Zapier Platform team. Just wanted to clear up some confusion here.
We've got 2 separate platforms, both of which are run in Lambda. Currently, they run different versions of Node.js. The Web Builder runs 4.3.2 and the CLI runs 6.10.2. You can read more about the differences here.
To answer your question, there's no mechanism to have a Web Builder app run Node 6 right now, but we'll need to move them all at some point.
I'll see what I can do about making that distinction more clear in the docs. Sorry for the confusion!

Categories

Resources