Warnings in reactstrap when using React's strict mode

[edmorley]

• components: Transition, Modal
• reactstrap version 6.5.0
• import method es
• react version 16.6.1
• bootstrap version 4.1.3

What is happening?

React 16.3 added a new strict mode, which highlights potential issues in an app (such as those that will cause problems when using the upcoming async mode):
https://reactjs.org/docs/strict-mode.html

Enabling it for our app resulted in several errors coming from reactstrap:

Warning: Legacy context API has been detected within a strict-mode tree: 
    in StrictMode (at job-view/index.jsx:28)

Please update the following components: Transition

-> see: https://reactjs.org/docs/strict-mode.html#detecting-legacy-context-api

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.

    in div (created by Transition)
    in Transition (created by Fade)
    in Fade (created by Modal)
    in div (created by Modal)
    in Portal (created by Modal)
    ...

-> see: https://reactjs.org/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage

Warning: Unsafe lifecycle methods were found within a strict-mode tree:
    in StrictMode (at job-view/index.jsx:28)

componentWillReceiveProps: Please update the following components to use static getDerivedStateFromProps instead: Modal, Transition

componentWillUpdate: Please update the following components to use componentDidUpdate instead: Modal

-> see: https://reactjs.org/docs/strict-mode.html#identifying-unsafe-lifecycles
(this last one is half-covered by #1159, but not fully)

What should be happening?

No warnings/errors when using reactstrap with React.StrictMode.

Steps to reproduce issue

1. Clone https://github.com/mozilla/treeherder (tested using 3ad320d)
2. Edit ui/job-view/index.jsx to replace the render call with:

render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root'),
);

3. yarn
4. yarn start
5. In the new browser tab opened by webpack-dev-server (which should end up redirecting to http://localhost:5000/#/jobs?repo=mozilla-inbound), open devtools to the console tab
6. Click on one of the green symbols shown on the right hand side.
7. In the panel that opens at the bottom click the "three dots" on the toolbar, then select "Custom action..."

Error message in console

See above.

Code

See STR.

[edmorley]

Oops Transition is from react-transition-group instead, making the only remaining part of this issue identical to #1159. Sorry for the noise!

[sammy2077]

@edmorley Can reactstrap use a recent version of react-transition-group?

reactstrap/package.json

Line 261 in 6ea2488

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

This error has been fixed in the package since v4. See https://github.com/reactjs/react-transition-group/blob/1fd4a65ac45edd2aea3dec18eeb8b9c07c7eb93f/CHANGELOG.md

[iamandrewluca]

Yeap it can be updated, but there are some reasons why this is on hold

Updating react-transition-group will imply a major version release for reactstrap
A often major version release for just one dependency update is not desired because with a major version release
there are some more features to fix, implement, deprecate and other stuff.
And right now unfortunately this library is lacking contributors. 😐

If people were more kindly to major releases and breaking changes, would be great 🙂

[sumanthratna]

Here's my personal opinion:

• according to the SemVer FAQ, reactstrap shouldn't need to bump the major version
• even if you do bump the major version, I think people would still appreciate the fact that this issue has been fixed. I think most developers like it when they can update the major version of a dependency without there being any breaking changes :)

[juhana]

Could you clarify why updating the dependency would mean a major version release? What kind of breaking changes would it introduce?

[wardhanster]

Having this issue with the latest version ^8.5.1

[charithcherry]

i tried <React.Fragment> instead of <React.StrictMode> . it worked without that error

[mh-daneshvar]

I've this issue in version "8.6.0" too

[dzmitry-kankalovich]

Not sure why this is closed, still happens to me on 8.5.1

[iamandrewluca]

#1340

[adarali]

Not sure why this is closed, still happens to me on 8.5.1

8.7.1 and still happens to me too when I open a modal. Maybe somebody should update the docs @ https://reactstrap.github.io/components/modals/ so the error/warning doesn't appear anymore.

[CleverOscar]

This is still an issue occurring in 2021, can I please get some help solving this error. It is really annoying

[xjl0]

I started using the Navbar component from the example in the official documentation and an error occurs: Legacy context API has been detected within a strict-mode tree. Please update the following components: Transition
Fresh React Create App.
"bootstrap": "^5.0.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"reactstrap": "^8.9.0",

[momega]

Please, reopen the issue. "Please update the following components: Transition" still exists.

[bestguy]

Hi, we are helping out as maintainers, at least until Bootstrap 5/Reactstrap 9 is stable.

I will reopen, and could one of you please try the reactstrap@9.0.0-2 prerelease?
Deps have been updated so may be clear now. (FYI Reactstrap 9 requires Bootstrap 5).

If still issue, please consider PR for issue resolution. Reactstrap 9 will be major version bump and an opportunity for breaking change.

[rteex]

Hi,
I updated Reactstrap, but the error is still there. My config now: "bootstrap": "^5.1.0", "reactstrap": "^9.0.0-2"

[bestguy]

Thanks, I've updated rtg to v4, but need to test if addresses everything in this issue.

[bestguy]

This should be corrected by #2268 , we'll do a new prerelease this week and can try out.

[fkrauthan]

I guess it got removed from the actual bootstrap 5 upgrade as the warning seem to still exist.

[meszaros-lajos-gyorgy]

Bump
This is still happening in reactstrap 9.1.4
Any updates on this?

[FractalStranger]

Still not fixed (9.1.5)

[davinun99]

This error persists for me! Still not fixed (9.1.5)

[rubenmamo]

Can confirm that this is still not fixed in 9.1.5

[brahimouindali]

still, this warning occurs in my nextjs project
I'm using pnpm to install dependencies and node v16.13.0
"reactstrap": "^9.1.5"
"react": "18.2.0",
"react-dom": "18.2.0",
"bootstrap": "5.2.3"

[illiteratewriter]

The PR has not been merged.

[ZerosMzg]

still happening in v9.1.5

[ginxx009]

same here on v9.1.5

[AMoktar]

same here with reactstrap v9.1.5

[caleyg]

I'll put my name in the hat and add that I am running into this with 9.1.5 and 9.1.6.

[mostopalove]

Still actual for <Popover> component in "reactstrap": "9.1.6"