Fade shows deprecation console warnings that are fixed in react-transition-group 4.4.x

[justingrant]

• components: Fade
• reactstrap version #8.4.1
• import method es
• react version #16.12.0
• bootstrap version #4.4.1

What is happening?

The Fade component shows console warnings whenever it fades, including every Modal closing. The warnings come from <Tansition> from react-transition-group, which has been recently updated (in 4.4.0) to remove the findDomNode warning. The legacy context warning was fixed last year.

Can this dependency be bumped?

Repro is here: https://mzp6t.csb.app/ You can also edit the code sandbox yourself here: https://codesandbox.io/s/vigorous-moore-mzp6t?file=/src/App.js, but in the editor view you'll need to hit the little refresh button above the embedded browser to see the warnings. In the full-screen view (and in real apps) the warnings show up whenever something fades.

Here's the equivalent stackblitz site with the same code: https://stackblitz.com/edit/reactstrap-ii7fyd?file=Example.js. The same considerations apply: the warnings don't show up reliably in the editor view; you'll need to pop out to a full-screen view to see the warnings every time the page loads.

I tried to test the updated react-transition-group myself but I couldn't get builds working on my Mac on Node 12. FSEvents refused to build, which seems like an active issue for fsevents as discussed here: fsevents/fsevents#315 (comment)

What should be happening?

No console warnings when using Fade or closing Modals.

Steps to reproduce issue

1. https://mzp6t.csb.app/
2. open console

Error message in console

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: Transition

Learn more about this warning here: https://fb.me/react-legacy-context
    in StrictMode (at src/index.js:8)


Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed 
an instance of Transition which is inside StrictMode. Instead, add a ref directly 
to the element you want to reference. Learn more about using refs safely here:
https://fb.me/react-strict-mode-find-node
    in h5 (created by Transition)
    in Transition (created by Fade)
    in Fade (at App.js:19)
    in div (at App.js:15)
    in div (created by Container)
    in Container (at App.js:13)
    in StrictMode (at App.js:12)
    in App (at src/index.js:9)
    in StrictMode (at src/index.js:8)

Code

https://stackblitz.com/edit/reactstrap-ii7fyd?file=Example.js

import React, { StrictMode, useState } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Container, Fade, Button } from 'reactstrap';

export default function App() {
  const [fadeIn, setFadeIn] = useState(true);

  const toggle = () => setFadeIn(!fadeIn);

  return (
    <StrictMode>
      <Container>
        <br />
        <div>
          <Button color="primary" onClick={toggle}>
            Toggle Fade
          </Button>
          <Fade in={fadeIn} tag="h5" className="mt-3">
            This content will fade in and out as the button is pressed
          </Fade>
        </div>
      </Container>
    </StrictMode>
  );
}

[RodriguezLucha]

I ran into this just trying to use a Modal

[zhyd1997]

This is because the version of react-transition-group is too low:

"react-transition-group": "^2.3.1"

The problem has solved in react-transition-group 4.4.0, see CHANGELOG.

So you can revert react-transition-group to the same version as reactstrap using now, or maybe official could update the version of react-transition-group

[heytulsiprasad]

Hey guys, do we have a workaround for this yet?

I tried adding the nodeRef attr as @007tom suggested in above PR, it popped one more issue for me (without solving prior ones).

This is a simple Navbar component, where I'm facing this issue.

class AppNavbar extends Component {
  constructor(props) {
    super(props)
    this.state = {
      isOpen: false,
    }
    this.myRef = React.createRef(null)
  }

  toggle = () => {
    this.setState({
      isOpen: !this.state.isOpen,
    })
  }

  render() {
    return (
      <div>
        <Navbar
          nodeRef={this.myRef}
          color="dark"
          dark
          expand="sm"
          className="mb-5"
        >
          <Container>
            <NavbarBrand href="/">Shoppe Bag</NavbarBrand>

            <NavbarToggler onClick={this.toggle} />
            <Collapse isOpen={this.state.isOpen} navbar>
              <Nav className="ml-auto" navbar>
                <NavItem>
                  <NavLink href="/">Nowhere</NavLink>
                </NavItem>
              </Nav>
            </Collapse>
          </Container>
        </Navbar>
      </div>
    )
  }
}

I also checked the dependency tree and saw react-transition-group uses it's version 2.9.0 for this, whereas its latest pkg is 4.4.1. I hope there's a workaround to fix that, or maybe we can just update the package version reactstrap uses.

Thanks!

[zhyd1997]

@heytulsiprasad see Here

[heytulsiprasad]

So we just have to wait for reactstrap to update its dependency version, then?

[zhyd1997]

I think so, the problem only appears in dev mode, and it doesn't effect prod enviroment, so don't worry about this problem

[phlax]

so don't worry about this problem

it would be great if this was fixed, its not so much worry as a pita when trying to cleanup/debug in the console

[bakasmarius]

I also have the same warning with LoadableComponent:

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: LoadableComponent

Any plans for fixing it anytime soon?

[UweWindt]

is there any progress in this issue?

[SET001]

any workaround for this so far?

[Jazzykhan]

It is still happening i have copied a button code from this site:
https://www.creative-tim.com/learning-lab/nextjs/modal/argon-dashboard
Now when i used it my React-Next.js project it is different from the website it is not using transitions and it has different colors for everything why is that any workaround for this?
@007tom

[zhyd1997]

@Jazzykhan
I never used next.js, but you can try this:
https://stackoverflow.com/a/67846207/8537000

codesandbox: https://codesandbox.io/s/react-nextjs-reactstrap-7slww

[AarRidho]

Up

[FPDK]

A quick fix is to add React Transition Group version 4 (yarn add react-transition-group) and then create your own component. Here is the Collapse component using the RTG version 4: https://gist.github.com/FPDK/30f7cb162ed334dce1ca94e19f931c99

[varamsky]

Still getting this error when using Modal
"reactstrap": "^9.0.0"

[fkrauthan]

Same. Any news on this? I was hoping the bootstrap 5 upgrade of reactstrap would fix this warning?

[fkrauthan]

This still seem to be an issue with 9.0.1 as well.

[Timonwa]

This still seem to be an issue with 9.0.1 as well.

Till now, its still an issue.

[kai-dorschner-twinsity]

What makes it worse is that there are multiple open PRs trying to fix that since January 2020.
https://github.com/reactstrap/reactstrap/pulls?q=is%3Apr+is%3Aopen+transition

[Cheetah0723]

Hello.
When I use "Fade" component from React-reveal, this issue occupies.
How can I fix this issue.
Of course, I don't use react-transition-group.

[urlsab]

Same as Cheetah0723 . I saw an alternative, package name "react-awesome-reveal" , but I don't no if it's realy solve the problem and gives better animations etc then "react-reveal".

So I leave this issue now, while my code is working