16

This is brand new install - I have not put any transitions on the Alert component

To replicate the code it is simple

import React from "react";
import { Alert } from "reactstrap";

export const Index = () => {
   return (
      <div>
         <Alert color='primary'>This is a primary alert — check it out!</Alert>
      </div>
   );
};

Error Msg: Please update the following components: Transition

enter image description here

How does one go about updating Transition or eliminating it all together?

Bergi
  • 630,263
  • 148
  • 957
  • 1,375
Michael Nelles
  • 5,426
  • 8
  • 41
  • 57

3 Answers3

27

In the event that someone comes here on after searching the question and is looking for insight this is it.

React strap (at the time of this post) uses the react-transition-group things fade in and out and menus slide up and down. After amalgamating the info on this subject here and on Github they are currently updating the library. I have finished the coding of that component by ignoring the warning.

It did not impede this iteration of that component. Happy Coding.

Michael Nelles
  • 5,426
  • 8
  • 41
  • 57
  • 1
    I am not using reactstrap but still getting this error. Any idea? – AbhimanuSharma May 20 '21 at 07:07
  • My best guess is there is a dependent library which is not compiling properly or a security risk. Try updating your package.json with `ncu -u` then run `npm i` (ncu = node-check-updates) https://www.npmjs.com/package/npm-check-updates – Michael Nelles May 20 '21 at 16:14
  • Update: as of Feb 2022, this issue is still not closed in ReactStrap. GH thread: https://github.com/reactstrap/reactstrap/issues/1833 – Freewalker Feb 08 '22 at 00:10
23

I have this same warning, and I fixed it changing in the index.js file, the value of <React.StrictMode> to <React.Fragment>. Since this removes the warning, is not guaranteed that your can be bulletproof.

Jorge Luis
  • 902
  • 12
  • 25
  • 22
    That's not "fixing it"! Silence != mute – miquelvir Jan 13 '21 at 12:07
  • 8
    Downvote, because this answer promotes bad practices. – Hubert Grzeskowiak Mar 01 '21 at 06:30
  • 1
    `` only logs when not in production mode so removing it has no effect, except hiding helpful deprecation/warning logs when in development mode. And if you want to remove it, just remove it instead of replacing it by a fragment. – Valentin Jun 10 '21 at 16:17
  • 1
    fyi, the 2 tags you mentioned are not related.. you'd have the same result if you replaced it with a DIV tag.. the error went away because you removed the StrictMode tag – Sonic Soul Oct 24 '21 at 18:45
1

This issue was reported, and apparently fixed but I received the same error even with the updated source code. It's more than just the error as well - it can cause components to re-render

Here is one github thread from the reactstrap repo about this (but there are a number of them): https://github.com/reactstrap/reactstrap/issues/1340

There are a number of issues related to this warning though.

As best I can tell it has something to do with an item in Transition.js, and I think it may have to do with a this.context call when a component is 'entering'

But, the project I encountered this issue is the first React App I'm building, and I'm not quite ready to learn the Legacy Context API, so that's just my best guess and in the end I just opted for an alternative package.

I don't have the rep to put this in a comment, so the only answers I have are:

  1. Report the issue to the reactstrap team and wait/assist with a fix
  2. Use an alternative package
Meep Teepo
  • 33
  • 7