Legacy context API has been detected within strict-mode tree

[Tadas Millieška]

Is anyone having the same issue? After installing the library and using the Fade animation, Dev tools prints out this error message:

index.js:1 Warning: Legacy context API has been detected within a strict-mode tree.
The old API will be supported in all 16.x releases, but applications using it should migrate to the new version.
Please update the following components: RevealBase

[Yash Kandalkar]

Yes! I just installed the library and use the Reveal component for custom CSS effects.
I get the error you described plus a warning
Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details.

Here's a photo:

[Yash Kandalkar]

Just saw, there are open issues related to this ( #89 )

[Md.Mahamudul Hassan Ashik]

hmmm, the same warning

[Md.Mahamudul Hassan Ashik]

How can I solve this?
Please update the following components: RevealBase

[Chafik49]

Guys go to index.js and change React.StrictMode to React.Fragement

[Felix Orinda]

Does this just fix so that the error is not seen. Does having it disabled just pose a threat on some errors you cannot visualize without the <React.StrictMode> enabled?

[maxepam]

Guys go to index.js and change React.StrictMode to React.Fragement

This is not helping. Is there some other variants to fix this error ?

[Felix Orinda]

Guys go to index.js and change React.StrictMode to React.Fragement

This is not helping. Is there some other variants to fix this error ?

I think this lib requires an upgrade to remove this warning

[Shamaz saeed]

This library is not maintained anymore. Use alternative of it

https://www.npmjs.com/package/react-awesome-reveal

[Adi Yusuf Ramadhan]

Guys go to index.js and change React.StrictMode to React.Fragement

this is correct, just a typo, it should be like "React.Fragment"

[Rohit-Dhende-Minddeft]

Guys go to index.js and change React.StrictMode to React.Fragement

this is correct, just a typo, it should be like "React.Fragment"

Not a typo, these are 2 different things. You are just disabling the warnings using React.Fragment, that's it. It doesn't solve the issue.

[Trần Quang Ngọc]

Guys go to index.js and change React.StrictMode to React.Fragement

this is correct, just a typo, it should be like "React.Fragment"

Not a typo, these are 2 different things. You are just disabling the warnings using React.Fragment, that's it. It doesn't solve the issue.

How to fix this issue bro

[Rohit Dhende]

Guys go to index.js and change React.StrictMode to React.Fragement

this is correct, just a typo, it should be like "React.Fragment"

Not a typo, these are 2 different things. You are just disabling the warnings using React.Fragment, that's it. It doesn't solve the issue.

How to fix this issue bro

The React.Strictmode gives additional warnings and it doesn't affect the production mode. It shows warnings in development mode only, it is a good practice to use strictmode as it gives warnings of deprecated packages or properties which may not have support for browsers now. It just tells us to use the latest package or somewhere we have broken the standards of developing the website.

For example, i want to display text with p tag and in addition i want few of the words with different styling so some of the Dev's do like this

<p>
   This is
    <h1> 
    Wrong 
   </h1>
    way to do it
</p>

In the above example, this absolutely breaks the standards of development that p tag should not hold the h1 tag. We cannot write a h1 tag inside the p tag. So in this case it shows the warning even tho this piece of code works on the website but it is not a good practice.

So the solution is to follow the standards of developing websites and make sure you are up to date with the packages.

[Rohit Dhende]

Is anyone having the same issue? After installing the library and using the Fade animation, Dev tools prints out this error message:

index.js:1 Warning: Legacy context API has been detected within a strict-mode tree. The old API will be supported in all 16.x releases, but applications using it should migrate to the new version. Please update the following components: RevealBase

It clearly says that, the support for following package may not be there and need to migrate it to the newer version. I also faced this issue. The solution is to remove the dependency of react-reveal package and instead use 'framer-motion'. You can make this package work like react-reveal. I wanted to use it for fade animation for the headers and it is working perfectly for me.

This piece of code may help you. You can animate it by yourself, this is just an example.

import { motion } from 'framer-motion';

const YourComponent = () => {
  return (
    <motion.div
      initial={{ y: '50%', opacity: 0 }}
      animate={{ y: 'calc(0%)', opacity: 1, transition: { duration: 0.5 } }}
    >
      Your content
    </motion.div>
  );
};