React 16 upgrade fatal errors ag-grid? - reactjs

Has anyone upgraded their ag-grid installation to React 16 aka Fiber? I upgraded to react#next and react-dom#next, and instantly got a fatal error. My tool is closely based on the ag-grid-react-example, and the problem seems to be with cell editors. Anyone seen anything similar?

we are aware of this in ag-Grid and plan to fix it soon (hopefully coming days), React Fiber changes how things are done underneath the hood, and the pattern we use to allow React components needs to be tweaked.

Related

How to handle errors with react 15

Currently I work on an old project that uses React 15. Sadly there is no way to upgrade because they are using an old on prem solution.
I Want to implement error handling with error-boundaries but they are only supported from react 16 https://reactjs.org/docs/error-boundaries.html
React 15 has something called "unstable_handleError" https://medium.com/#blairanderson/handle-react-errors-in-v15-4cedaae757d7 but as the name suggest its not reliable. https://github.com/facebook/react/issues/9253
Is there a way to make a custom error boundary with react 15?
Thanks!

Cannot see debug information from React ErrorBoundary

I'm working my way through the wonderful Serverless Stack Tutorial, and I reached the chapter on using a React ErrorBoundary to view debug information. In the chapter, it describes how one should see debug information when running the application locally (as shown below in this image from the chapter).
I've made sure that I've copied the code and set it up correctly. However, I'm not seeing the debug information in my local debug instance. I only see the fallback UI:
I'm wondering if I'm using a later version of either React or other services than used in the tutorial. I've committed my code to a separate branch in case anyone would be willing to pull/fork and try it. I'd appreciate any assistance.
Update
I found my way to this Github issue describing changes in behavior between React 17 and React 18. The issue led to this CodeSandbox example. I noticed one of the examples displayed an overlay which looked similar to the one in the tutorial example. I saw this text at the bottom:
This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error.
This error overlay is powered by `react-error-overlay` used in `create-react-app`.
Searching for react-error-overlay led me to this package. I can see this package is included in my code as installed per the tutorials instructions. However, it does not seem to be running to display errors during development.

React Native Require cycles are allowed warning

I am working on some React Native project. If you work with react native or react before, you know that even in the middle-size projects, imports increase dramatically. Due to that, I use the technique which is creating index.js/ts and import a file from the one reference. Everything was quite perfect until upgrading the react version. When I had upgraded the version of the project, the project started to show me a warning message as you can see below.
But the thing is, I made this cycling dependency on purpose. I don't know how can I fix the thing by continuing to make the all imports together.
here is my Plugings/index.ts file;
and here is my Plugins/Contact.ts file;
PS: I know that the solution by making import directly, which means not importing from index.ts file.
Thanks for the time.
I think you could try import your Localization from './Localization' at Contact.ts
And you could work as what in index do in Contact.ts, and then you will not import
index at Contact.ts to disconnect the chicken-egg problem.

Can Material-UI and reactstrap co-exist in the same Reactjs application?

I have a Reactjs app that I'd like to convert from react-strap to Materials-UI. My question is, can I have them both including in the app at the same time? This would allow me to convert a component at a time. The other option is to create it from scratch, which I would hopefully avoid.
Another concern, is it possible that I'll somehow corrupt the application by importing the Materials-UI dependency? And would restoring from git be enough to eliminate the problem?
The main reason for doing this is I've had a difficult time trying to create a dropdown box in a form in reactstrap, despite my best efforts. Materials-UI seems to be a widely-used and supported library, with a nice set of components, including dropdown.

Is react-navigation is supported in ReactXP?

I just started learning ReactXP and I want to use React-Navigation-https://reactnavigation.org/ in ReactXP. Is React-Navigation is supported in ReactXP? If yes, Then we have any working example?
I found one example but its not working. https://github.com/LeJPR/reactxp-navigation-example
Referring to this link (https://microsoft.github.io/reactxp/docs/extensions/navigator.html) the default way of reactXP is currently not using React-Navigation but might do in the future.
The current implementation of Navigator on React Native makes use of the deprecated “Navigator Experimental”. We will look at moving away from this implementation to the now-recommended “react-navigation” in the near future. Some of the more advanced interfaces may need to change. These are listed at the end of this article. Use these with caution.
I read somewhere in the reactXP issue list on gitHub that your example (https://github.com/LeJPR/reactxp-navigation-example) does not just use react-navigation but had to change the annimation system used in reactXP and seems to not beeing updated anymore.
The core of react-navigation works fine with reactxp, to get it running as is you just need to create reactxp versions of the views used by the different navigator types such as stack/drawer/tab. In doing this though i ran into some challenges with the parity of reactxp animation vs react-native. Unless i'm mistaken it seems there's some quite fundamental limitations with reactxp animation currently - from what i can see you can only have a single interpolation off an animated value (add another and it will overwrite the first), only two values in an interpolation array (as opposed to multiple steps). This functionality is used extensively in the react-navigation views for native like experience. To get around this (driven by a lack of time to consider how to reimplement with reactxp animation) i ended up patching in animatedjs for use on reactxp web navigation views, which provides parity with react-native. Kind of leads me to believe considering animation might be a precursor to react-navigation/more important question. Happy to put up a sample of the above approach to getting react-navigation working with reactxp if of benefit - definitely just for awareness and not production use though!
The example does actually come from this reactXP issue: https://github.com/Microsoft/reactxp/issues/9#issuecomment-303717309
Options I found for Navigation without writing an Extention on your own
contained in reactXP https://microsoft.github.io/reactxp/docs/extensions/navigator.html
also from reactXP team but not in use? https://github.com/Microsoft/react-native-experimental-navigation
an other navigation package I found https://github.com/ymzuiku/react-router-hash-history

Resources