Strict mode warnings from Atlaskit ProgressTracker and InlineMessage components

Forge Forge UI Kit and Custom UI
1

Hi there,

I am using CustomUI and noticed the following strict mode warnings in the console when using the ProgressTracker and InlineMessage Atlaskit components. I am unable to follow the suggestion about updating as I am already using the latest versions.

Also it seems the InlineMessage component placement is not working, as it always shows up in the top l left corner of my app regardless of the placement property value.

Two questions

  1. Is this something the Atlaskit team knows about, is working on?
  2. Any workarounds?

Environment info

node: v12.20.0
"react": "^16.14.0",
"react-dom": "^16.14.0",     
"@atlaskit/inline-message": "^11.0.8",
"@atlaskit/progress-tracker": "^7.0.6",
"styled-components": "^5.2.1"

ProgressTracker v.7.0.6
https://atlassian.design/components/progress-tracker/code

index.js:1 Warning: Using UNSAFE_componentWillReceiveProps in strict mode is not recommended and may indicate bugs in your code. See https://fb.me/react-unsafe-component-lifecycles for details.
* Move data fetching code or side effects to componentDidUpdate.
* If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state

Please update the following components: ProgressTracker, ProgressTrackerStage

index.js:1 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 div (created by styled.div)
    in styled.div (created by ProgressTrackerStage)
    in Transition (created by CSSTransition)
    in CSSTransition (created by ProgressTrackerStage)
    in div (created by styled.div)
    in styled.div (created by ProgressTrackerStage)
    in div (created by AkGridColumn)
    in Ge (created by AkGridColumn)
    in div (created by styled.div)
    in styled.div (created by AkGridColumn)
    in Ge (created by AkGridColumn)
    in AkGridColumn (created by WithTheme(AkGridColumn))
    in WithTheme(AkGridColumn) (created by ProgressTrackerStage)
    in ProgressTrackerStage (created by ProgressTracker)
    in div (created by styled.div)

InlineMessage v11.0.8

https://atlassian.design/components/inline-message/code

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

Learn more about this warning here: https://fb.me/react-legacy-context
    in AnalyticsContext (created by WithAnalyticsContext(WithAnalyticsEvents(InlineDialog)))
    in WithAnalyticsContext(WithAnalyticsEvents(InlineDialog)) (created by InlineMessage)
    in div (created by styled.div)
    in styled.div (created by InlineMessage)
    in InlineMessage (at ShowInlineMessage.jsx:28)
type or paste code here
1 Like
2

FYI, identified a workaround by installing earlier version of styled-components. I was using
“styled-components”: “^5.2.1”

By installing “styled-components”: “^3.2.6” - all warnings disappear and both InlineMessage and ProgressTracker now work without any problems.

3

I don’t know how did the warnings disappear. I’m using "styled-components": "3.2.6", and the warnings still appear when running Forge Tunnel with React Dev Server.

4

You are right these warnings still appear! I am not sure howcome they disappeared temporarily in my environment :confused:

Would be great to get feedback from Atlassian about plans to upgrade the components because at the moment we can’t move beyond react 16.*

The Atlaskit components :two_hearts: and the resources :two_hearts: found here are great resource for anyone building Forge CustomUI apps:

5

There is more information about the status of Styled Components here: Log in with Atlassian account

2 Likes