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.
Related
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
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.
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
I installed through npm in WebStorm this library
npm install basicscroll
The IDE highlights the words of the package, and everything seems fine until I try to see the project in the browser:
The console gives me this issue:
applicative.js:15 Uncaught ReferenceError: basicScroll is not defined
at applicative.js:15
at NodeList.forEach (<anonymous>)
at applicative.js:6
So I added at the beginning of my JS file this statement:
const basicScroll = require('basicscroll')
The result this time is that the library remains highlighted, but the method called on it not. And in browser this is the error prompt by the console:
Uncaught ReferenceError: require is not defined
I checked my node_modules directory, I can see the sub-directory, so I think the installation process went right. I also checked the package.json file:
"dependencies": {
"basicscroll": "^3.0.2",
[...]
I honestly don't know where the problem is. I'm new to web development and online I found that the webpack module-bounder could help me, but I don't even know where to start. What is wrong ?
Thank'you !
It seems like you are trying to use server-side code in a client-side environment. As far as I know require is a NodeJS thing and doesn't exist in the browser.
Your easiest solution would be to use a <script> tag in your html to import the files you need. Something like <script src="dist/basicScroll.min.js"></script>
This answer mentions some other tools you could use to manage that sort of thing: https://stackoverflow.com/a/19059825/1801137
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.