Expo DevTools shows An Unexpected Error Occured - react-native

So, before anyone asks for the minimal code, I haven't wrote one yet. It's the default template. I just set up the environment and made a new project and ran npm start to test it out. However, DevTools opens up in my browser at localhost:19002 but with this error: "An Unexpected Error has occured." It's a completely black screen with only this error text. However, I can still scan the QR code using my iPhone. There are no error logs in the terminal except: npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead. but I doubt they are linked. Are they though?

Found the solution! Apparently expo-cli v5.4.10 has some issues with the web interface. Rolled back to 5.4.9 and DevTools work again now.
This is the rollback command npm i -g expo-cli#5.4.9

Expo has been intending on removing the web interface for a while now (in v6.0.0), as shown in this article: https://blog.expo.dev/sunsetting-the-web-ui-for-expo-cli-ab12936d2206. Instead, you will have to use the command line to test your app. I personally don't see how it is easier, but it is not a bug, the expo team have intentionally deprecated the web interface.
I suggest that you try to learn the command line interface, because as soon as you need to update expo cli, then you will have no choice.

Related

React Native TypeError: Cannot read property 'indexOf' of undefined, js engine: hermes

I am working on a react-native project. I have been running the application on Android and iOS devices for the past 6 months. I haven't faced any problems till now. But suddenly today, while I am trying to run the application I am getting a compile error with the description. TypeError: Cannot read property 'indexOf' of undefined, js engine: hermes. I tried to debug the issue and found that there is an issue while connecting to the remote debugger. But the strange thing here is even I haven't selected the remote debugging option from either of emulator or simulator.
So, I have enabled the remote debugging option from the emulator to get a quick fix. It is working fine. But why is it connected to the remote debugger even after the fresh installation? And the quick fix comes with its own issues. The application is functioning a bit lag and inconsistent. I suspect there is an issue with the metro bundler. I have removed the cache using rm -rf /tmp/metro-* command, cleaned gradle using ./gradlew clean command, and cleaned iOS build by deleting derived Data. But still, the issue persists.
Is there any other step am I missing here? If it is the issue with the metro bundler, is there any way to reset it completely? Please check the attached image for more information.
The reason for this issue in my case is not with the metro bundler or its cache but with one of the third-party dependency named auth0-js(In your case it would be different). It is adding some global or window properties which are causing the above-mentioned issue. I have removed it and replaced with the library which is closed to react-native ecosystem which eventually resolved the issue.

Expo modules core dependency.platformns.ios must be of type object

I just updated to Expo 43.0 in a bare workflow project and followed the guide on how to update the app to also use expo-modules-core. The app runs in dev mode and can compile to both Android and iOS. However, when running react-native-start the following message is shown in the terminal:
warn Package expo-modules-core has been ignored because it contains invalid configuration. Reason: "dependency.platforms.ios" must be of type object
Then the metro server starts. I have tried searching for others with similar issues, does anyone know what may be causing this?
I followed this guide: https://docs.expo.dev/bare/installing-expo-modules/
This warning is coming from react-native-community autolinking. it looks like the api changed and they don't accept null values anymore, but this is what they still specify in their docs. the behavior you see is expected still - expo-modules-core is and should be ignored by react-native-community autolinking, because it's handled by expo autolinking. so, this won't impact your project and it's a warning caused either by an accidental regression or undocumented change in react-native-community autolinking.
https://github.com/expo/expo/issues/16085
Yes, it is coming from react-native. So for resolving this issue you have to remove the react-native.config.js file from node_modules
Follow the bellow steps:-
Go to node_modules/expo-modules-core
Delete react-native.config.js

Unable to find module for EventDispatcher React Native

On starting application using react-native run-ios its showing error on simulator Unable to find module for EventDispatcher
Stop remote JS debugging and then reload the app
It will give you the appropriate error message, most likely missing some render on one of your components. That fixed it for me.
So this issue happened to me after I upgraded to RN 0.59.x.
I was getting this error when live reload was enabled or if i tried to refresh screen on iOS by pressing CMD+R.
Related issues:
Unable to find module for UIManager
Unable to find module for
DevLoadingView
Unable to find module for EventDispatcher
Here's how I solved it:
Edit your AppDelegate.m file and add the following code before the #end
#if RCT_DEV
- (BOOL)bridge:(RCTBridge *)bridge didNotFindModule:(NSString *)moduleName {
return YES;
}
#endif
This will fix the issue.
Link to the fix on github.
Related discussion on github.
Live reload and debug mode all should work without problems now.
This seems to be an issue when using the remote debugger with certain RN versions above 0.58. Using react-native-debugger should solve the issue as it supports RN versions above already.
It can be downloaded from the following link:
https://github.com/jhen0409/react-native-debugger/releases
I've started receiving this error after upgrading RN from v0.57.3 to v0.58.6.
Running packager with yarn start -reset-cache / react-native start --reset-cache fixed the issue for me.
What worked for me was simply stopping remote debugging as mentioned by #Hackman,
THEN killing the browser debugger, cleaning Xcode and rebuilding.
Couldn't tell you why, but the issue went away.
I'm using detox, what worked for me was switching the build command from
-configuration Debug
to
-configuration Release
It will no longer fetch from metro bundler and instead use the js bundle from the build. When I'm coding the tests, I build with debug since I'm fine with occasionally seeing the error, since I like the connivence of not having to constantly build and letting metro bundler do it for me.

Weex - why can not I start the project

I have a problem with weex. I wanted to start to learn to write a Vue app using weex, but I have a problem because I can not download the package. I have an empty folder and enter the command from the npm documentation install weex-toolkit -g, but it will give me such an error.
Image error:
https://cdn.discordapp.com/attachments/424284796068429824/431948032897187841/unknown.png
The error is from an npm dependency, fsevents, not weex per-se.
Have you tried on a different platform, or see if the toolkit got installed anyway?

SyntaxError: Strict mode ... after initialising project

I am evaluating react for my development purposes. Just now, trying to initialise a project (which has worked perfectly until yesterday) the following error occurs
SyntaxError: Strict mode does not allow function declarations in a lexically nested statement. (http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:24821)
after
react-native init SomeProject
see my answer here SyntaxError: Strict mode does not allow function declarations in a lexically nested statement on a newly created app
there is simple workaround for this and I think it will be fixed soon in react-native
I was having the same error and previously it was working fine. It seems like there is an issue with React Native 0.39.0 as reported here and here.
To solve this issue, try reverting the React Native version back to '0.38.0' by running npm uninstall react-native then npm install react-native#0.38.0 in your project folder.