Usage of legacy context API #1340

thetric · 2018-12-28T14:47:36Z

components: TabPane, Dropdown(,Item,Menu,Toggle), Manager, PopperTargetHelper, CarousellItem (see https://github.com/reactstrap/reactstrap/search?q=contextTypes&unscoped_q=contextTypes)
reactstrap version 6.5.0
import method: es
react version 16.7.0
bootstrap version 4.2.1

What is happening?

When using <React.StrictMode> Reacts advises against using the legacy context API:

Warning: Legacy context API has been detected within a strict-mode tree: 
    in StrictMode (at App.tsx:27)
    in App (at src/index.tsx:7)

Please update the following components: Dropdown, DropdownItem, DropdownMenu, DropdownToggle, Manager

Learn more about this warning here:
https://fb.me/react-strict-mode-warnings

From https://reactjs.org/docs/context.html#legacy-api:

React previously shipped with an experimental context API. The old API will be supported in all 16.x releases, but applications using it should migrate to the new version. The legacy API will be removed in a future major React version. [...]

What should be happening?

Reactstrap should be using the new Context API.

Steps to reproduce issue

Wrap an example app using some of the components mentions at the beginning in React.StrictMode and start it in development mode.

Code

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

The text was updated successfully, but these errors were encountered:

thetric · 2019-02-06T14:31:02Z

The Modal component uses deprecated lifecycle hooks:

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

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

gergely-nagy · 2019-02-06T22:59:56Z

I'll submit a PR for it!

iegik · 2019-08-12T08:36:31Z

Duplicate of #1159

armenzg · 2019-12-12T15:21:57Z

@gergely-nagy any progress?

jonathan-richer · 2020-06-03T20:30:50Z

Same thing on Collapse:

sumanthratna · 2020-06-22T16:54:02Z

I got this warning with Tooltip, if that helps.

MA-Ahmad · 2020-06-26T04:04:52Z

I got this warning with Carousel.

iamandrewluca · 2020-06-26T06:56:15Z

Anyone interested in fixing this?
Here Is a starting point #1866
One test is failing. I can't alocate more time.

kindyALkindy · 2020-07-07T14:21:42Z

I got this warning with Tooltip

rmlevangelio · 2020-07-13T05:01:41Z

Also happening in Fade component

ka-dev12 · 2020-07-17T02:57:58Z

I got this warning with Collapse navbar.

hauchongtang · 2020-07-20T09:17:09Z

Got this warning in
in Transition (created by Collapse) in Collapse (at AppNavbar.js:24) in div (created by Container) in Container (at AppNavbar.js:21) in nav (created by Navbar) in Navbar (at AppNavbar.js:20) in div (at AppNavbar.js:19) in AppNavbar (at App.js:10) in div (at App.js:9) in App (at src/index.js:8) in StrictMode (at src/index.js:7)

iamandrewluca · 2020-07-20T09:25:20Z

We know about this issue.

Legacy context is used only in `Carousel` right now, no other places.

All other warnings come from components that use `react-transition-group`, if you enable `StrictMode`, because it uses deprecated `findDOMNode` API

There is no more reasons to post about it.

vishaloswal · 2020-07-23T13:01:42Z

Same thing on Collapse:

Even I get similar warning, is there a work around or fix for this?

SumitJadiya · 2020-08-07T16:12:41Z

Workaround:
Remove strictMode from index.js

xreider · 2020-12-02T06:32:17Z

It is not resolved yet

iamandrewluca · 2020-12-02T07:33:07Z

@xreider do you want to help fixing it?

manhddse03539 · 2020-12-04T08:14:05Z

In index.js change React.StrictMode toReact.Fragment @@

chauger · 2020-12-10T20:03:08Z

Alert is causing this issue for me

adamf1631 · 2021-01-20T19:12:29Z

switch to <React.Fragment> in index.js

iamandrewluca · 2021-01-21T09:04:30Z

React.Fragment is not an alternative for React.StrictMode 🙂

d3ce1t · 2021-01-22T21:18:00Z

@iamandrewluca CMIIW the problem comes from react-transition-groups (as you said). Reactstrap is using that library at version 2.9.0. But last version is 4.4.1. Would it still happen in a more recent version? What's blocking reactstrap from updating?

thetric · 2021-01-23T18:05:33Z

My guess is that the author wants to support React < 16.3 which has no the new Context API. But react-transition-groups@3 requires the new Context API

iamandrewluca · 2021-01-23T19:10:45Z

We don't have time to allocate for this. And because this will be a breaking change, we thought of making multiple breaking changes at a time. But for that we have to allocate a lot of time, which we don't have.

adamf1631 · 2021-01-28T15:33:10Z

Yes, I found this warning as well, if you boys have any suggestions please step up and suggest. Thanks!

mazharvai007 · 2021-02-09T15:21:32Z

Same problem I'm facing when using Collapse from reactstrap. Is there any solution? Thanks

CleverOscar · 2021-02-16T22:24:28Z

Has this issue really been on for more than two years? I keep getting an error when using the Carousel component

dogukankutluay · 2021-02-22T11:47:50Z

İndex.js değişikliklerinde React.StrictModeiçin React.Fragment@@

thankx :)

musasahinkundakci · 2021-05-08T10:16:21Z

React.Fragment if you are beginner you can use it temporily :)

fsogutcen · 2021-05-09T12:13:00Z

Deleting "<React.Fragment>" in the index.js file may also be effective.
I chose to use it this way to solve it; " ReactDOM.render(,document.getElementById('root')); "

But since I'm newbie to React, I'm not sure how the right step is

dogukankutluay · 2021-05-10T12:06:45Z

İndex.js dosyasında "<React.Fragment>" i silmek de etkili olabilir.
Bunu çözmek için bu şekilde kullanmayı seçtim; "ReactDOM.render (, document.getElementById ('root'));"

Ama React için acemi olduğum için doğru adımın nasıl olduğundan emin değilim

selamlar , direkt olarak bütün dosyalar için fragment verilmesi en mantıklısı. İhtimale dayalı bir kod aslında. Araştırdım biraz

sbaechler · 2021-05-12T08:19:40Z

@iamandrewluca Can the removal of the legacy APIs be part of the 9.0 release?

Allakazan · 2021-08-19T19:14:05Z

This issue still are going on ? Isn't unsafe and dangerous to disable StrictMode ?

bestguy · 2021-09-05T15:21:15Z

@sbaechler , @Allakazan yes we have an opportunity now with the upcoming 9.x release.
However FYI there are no full time maintainers so any PRs for this off bootstrap5 branch would be appreciated.
(A few of us are helping out to get Reactstrap 9.x Bootstrap 5.x stable and released.)

bestguy · 2021-09-05T15:40:56Z

I've updated rtg to v4 in linked PR, but need to test if addresses everything in this issue. ~~I don't see direct usages of old context API, but catching up here.~~.

Carousel looks like still uses legacy context, but the RTG bump will help in most cases. If Carousel can be updated easily before 9.x release we can do it, but seems could also be a point fix after that too. PRs are welcome: https://github.com/reactstrap/reactstrap/blob/master/src/Carousel.js#L27

bestguy · 2021-09-05T18:43:00Z

Also updated Carousel context issue in #2268
We'll do another pre release this week for you all to try out.

samuelcolvin mentioned this issue Sep 28, 2020

[Alert.js/Transition] Legacy context API has been detected within a strict-mode tree #1837

Closed

GabrielMajeri mentioned this issue Oct 21, 2020

Fix strict mode warnings for Collapse component #1992

Merged

7 tasks

iamandrewluca mentioned this issue Nov 9, 2020

Warnings in reactstrap when using React's strict mode #1289

Closed

sebbalex mentioned this issue Nov 11, 2020

Warning on console due to legacy api used for transitions italia/form-pa#22

Open

bestguy mentioned this issue Sep 5, 2021

chore(deps): bump react-transition-group from 2.3.1 to 4.4.2 #2268

Merged

14 tasks

iamandrewluca mentioned this issue Nov 21, 2021

fix: use new react-transition-group api #2402

Closed

14 tasks

Usage of legacy context API #1340

Usage of legacy context API #1340

Comments

thetric commented Dec 28, 2018

What is happening?

What should be happening?

Steps to reproduce issue

Code

thetric commented Feb 6, 2019

gergely-nagy commented Feb 6, 2019

iegik commented Aug 12, 2019 • edited Loading

armenzg commented Dec 12, 2019

jonathan-richer commented Jun 3, 2020

sumanthratna commented Jun 22, 2020 • edited Loading

MA-Ahmad commented Jun 26, 2020

iamandrewluca commented Jun 26, 2020

kindyALkindy commented Jul 7, 2020

rmlevangelio commented Jul 13, 2020

ka-dev12 commented Jul 17, 2020

hauchongtang commented Jul 20, 2020

iamandrewluca commented Jul 20, 2020 • edited Loading

We know about this issue.

Legacy context is used only in Carousel right now, no other places.

All other warnings come from components that use react-transition-group, if you enable StrictMode, because it uses deprecated findDOMNode API

There is no more reasons to post about it.

vishaloswal commented Jul 23, 2020

SumitJadiya commented Aug 7, 2020

xreider commented Dec 2, 2020

iamandrewluca commented Dec 2, 2020

manhddse03539 commented Dec 4, 2020

chauger commented Dec 10, 2020 • edited Loading

adamf1631 commented Jan 20, 2021

iamandrewluca commented Jan 21, 2021

d3ce1t commented Jan 22, 2021

thetric commented Jan 23, 2021

iamandrewluca commented Jan 23, 2021

adamf1631 commented Jan 28, 2021

mazharvai007 commented Feb 9, 2021

CleverOscar commented Feb 16, 2021

dogukankutluay commented Feb 22, 2021

musasahinkundakci commented May 8, 2021

fsogutcen commented May 9, 2021

dogukankutluay commented May 10, 2021

sbaechler commented May 12, 2021

Allakazan commented Aug 19, 2021

bestguy commented Sep 5, 2021

bestguy commented Sep 5, 2021 • edited Loading

bestguy commented Sep 5, 2021

iegik commented Aug 12, 2019 •

edited

Loading

sumanthratna commented Jun 22, 2020 •

edited

Loading

iamandrewluca commented Jul 20, 2020 •

edited

Loading

Legacy context is used only in `Carousel` right now, no other places.

All other warnings come from components that use `react-transition-group`, if you enable `StrictMode`, because it uses deprecated `findDOMNode` API

chauger commented Dec 10, 2020 •

edited

Loading

bestguy commented Sep 5, 2021 •

edited

Loading