SyntaxError: Strict mode ... after initialising project - react-native

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.

Related

Expo DevTools shows An Unexpected Error Occured

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.

Debugging React Native app having React Native Reanimated with Vscode: TypeError: global.performance.now is not a function

I'm tasked with an already-started project that has React Native Reanimated library as a dependency.
Whenever I debug my app with Vscode/Chrome debugger, when I navigate to any screen that has components depending on Reanimated, I keep getting global.performance.now is not a function.
I've already seen TypeError: global.performance.now is not a function in react native but in the latest version it is already changed to what the accepted answer to the question suggests.
I've tried downgrading react-native-reanimated to 2.2.4 and patch as suggested in the answer, yet then I start getting all sorts of errors like Property ' stopObservingProgress' doesn't exist.
I've also tried 2.3.1, also different yet blocker errors.
I've also tried with and without Hermes.
Disabling debugging gets rid of the error, but I (obviously) can't debug. Debugging with Flipper works yet debugging with Flipper is extremely slowing my workflow (e.g. switching between Vscode and Flipper and trying to find files to put breakpoints, unable to edit at the same place where I debug etc. Flipper is just not my thing) and I want to debug with Vscode, which works perfectly without Reanimated.
I want to get rid of Reanimated library but unfortunately there is already a lot of code that relies on it, including a library with no other alternative that directly depends on Reanimated.
How can I debug an app containing React Native Reanimated with Vscode?
It's still a known and open issue when we are using reanimated version 2.., you can find this in reanimated documation.
As the library uses JSI for synchronous native methods access, remote debugging is no longer possible. You can use Flipper for debugging your JS code, however connecting debugger to JS context which runs on the UI thread is not currently supported.
For now only flipper is the way of debugging react native apps that using JSI for syncronous native module calls.
Okay after further investigation I've found out that this is indeed possible. There were some other problems with latest versions of some of the dependencies that I've been using, which was masking the original issue. With the right combination of dependencies and following https://fbflipper.com/docs/extending/debugging/ and https://thinhtran3588.medium.com/make-professional-mobile-apps-with-react-native-and-typescript-debug-your-application-with-vscode-fba067f77445 I was able to debug my app correctly using Vscode debugger.

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

React Navigation and React Native Gesture Handler -- Invariant Violation: No callback

I have been experimenting mono repositories with javascript, using react and react-native applications. However, I have been having some problems using external dependencies on a simple react-native application.
While trying to integrate react-navigation following this guide here, I always end up with a lot of errors like:
ERROR Invariant Violation: No callback found with cbID 18929 and callID 9464 for module . Args: '[1131]'
It even gets in loop. This starts happening when I import react-native-gesture-handler at index.js. I have been trying to understand the problem for days and tried a lot of different stuffs, since nohoist of dependencies, clearing dependencies, reset react-native caches, watchman links and so on. However, I always end up in this error.
I have been experimenting with it on ios.
I am not sure it is a problem with the libraries I have mentioned here, because if I have a standalone react-native project, I can use the react-native-gesture-handler.
So, initially, I thought it was a problem with the mono repository structure I have, however, I have tried to use other libraries like: styled-components, react-native-router, react-native-restart, and react-native-contacts, and those libraries work well.
Has anyone passed for this problem? I have a github repository here where I try to explain how to reproduce the error.
I have also been documenting, to my self, my experimentations with mono repositories here, step by step, in case it gives more context.
I do not know if it is the best place to make this question, however I do not know where to look more, any suggestion is welcomed.
Thanks!

React Native app crashes on launch with Invariant Violation

I have a react native app built using Expo and everything was working fine until I had to npm install a package that broke everything. I've uninstalled the said package but the app doesn't seem to work any more. It shows the following invariant violation:
It shows an error Invariant Violation: ListView has been removed from React Native - however, I have not used ListView anywhere in my project. All my lists are through FlatList or VirtualisedList.
Additionally, I'm unable to deduce from the error info about the origin of this error. How do I fix this?
If you have the backup of the code please check the older version of React Native in package.json.
When you do npm install command your React Native version upgraded or may be some other packages.
So, you need to compare the packages with old package.json file. If you found that some packages are updated then you need to remove ^ e.g react-native: ^0.60.0 from package dependencies. This one is the only way to solve this problem.