Atlaskit + React 17

It looks like Atlaskit still prefers React 16.x and react-scripts 4.x.

Is there a plan to cleanly support React 17.x?

9 Likes

Depending on your component usage you’ll be able to use react-script 5 (or rather web pack 5).

I guess that’s true – react-scripts doesn’t really seem to be an issue as much anymore. But seems like React 17 still is:

npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.0" from @atlaskit/progress-bar@0.5.2
1 Like

Any Atlaskit developers able to comment? There are a growing number of libraries requiring peer dependencies on React 17.

For instance, tiptap is a very popular WYSIWYG text editor that requires 17 (the built-in atlaskit text editor isn’t always desirable with so many great OSS alternatives). What’s the roadmap for supporting React 17?

2 Likes

Now the question might be when they will support React 18…

3 Likes

Soooooo the thing with atlaskit is that it is not a single entity. It consists of components that are owned by multiple teams within atlassian.

The Design System team is responsible for maintaining the components that are found on https://atlassian.design. These components all have Typescript support, are migrated to emotion and support react 17+

All the other components on https://atlaskit.atlassian.com are maintained by other teams and most are not frequently updated, lack Typescript support and are still on Styled Components 3.x

If you use any of these components you’re basically fucked, because the DS team will not take responsibility for them, the other teams don’t give a shit and now your entire project will be shipping both SC and emotion and your’e stuck with react 16 for all eternity.

Any complaints about it will simply be you screaming at the void

18 Likes

Great context @remie

We’ll have to do an audit of which components we use from atlaskit.alassian.com. Perhaps we could replace them.

I’d love to update styled-components and React.

2 Likes

Thanks for this clarification @remie. I’m only using components from https://atlassian.design, and indeed they do all seem to work just fine with React 17, but they still do have 16 listed as the actual dependency. So --legacy-peer-deps is needed when installing.

The never ending joys of frontend web-dev, I suppose – React 18 is here and I’m beginning to have some tsc issues with the atlassian.design components.

1 Like

It looks like we use mostly components from atlassian.design plus the AtlasKit editor.

Upgrading one of our apps to React 17 did seem to work so long as I ignored all the warnings about using the wrong version of a peer dep.

I’m just wondering how risky this is. Is anyone else using React > 16 in production despite Atlaskit not officially supporting it? It’s been almost 2 years since React 17 came out so this is getting a bit ridiculous.

1 Like

Kind of tangential to React 17 but styled-components 3.x seems to be only pulled in from the AtlasKit editor for us now:

=> Found "styled-components@3.4.10"
info Has been hoisted to "styled-components"
info Reasons this module exists
   - Specified in "devDependencies"
   - Hoisted from "@atlaskit#editor-core#@atlaskit#date#styled-components"
   - Hoisted from "@atlaskit#editor-core#@atlaskit#editor-markdown-transformer#@atlaskit#editor-common#@atlaskit#editor-shared-styles#styled-components"

Given this is a pretty important component to Atlassian and definitely not deprecated can we get any indication on when it will be upgraded?

2 Likes

One of those, “Can’t I just do the work for you just so I don’t have to deal with this going forward” moments.

It’d be very much appreciated if at least the package.json files could be updated to indicate the libraries are indeed compatible with React 17.

But yeah, screaming into the void. At least it makes me feel better :slight_smile:

8 Likes

It’d be awesome if I didn’t have to use --legacy-peer-deps for all npm commands in order to use React 17 with Atlaskit. I also get the following console errors which I suspect are related to lack of support for React 17:

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

Warning: Using UNSAFE_componentWillReceiveProps in strict mode is not recommended and may indicate bugs in your code. See https://reactjs.org/link/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://reactjs.org/link/derived-state

Please update the following components: AtlaskitSelect

DEPRECATED JS - Cookie has been deprecated since 5.8.0 and will be removed in a future release. Use cookie instead.
at b.default (https://dppsafh9ucp3r.cloudfront.net/atl-vertigo--shard-jira-prod-us-29--2--jres.atlassian.net/s/d41d8cd98f00b204e9800998ecf8427e-CDN/6j2xsm/b/8/34f8b02632886523ebde9186cbd94992/_/download/contextbatch/js/jira.webresources:skate,jira.webresources:dialogs,jira.webresources:jira-global,jira.webresources:key-commands,com.atlassian.administration.atlassian-admin-quicksearch-jira:admin-quicksearch-webresources,com.atlassian.jira.plugins.jira-development-integration-plugin:devsummarycf-resources-init,com.atlassian.plugins.atlassian-connect-plugin:jira-atlassian-connect-resources-v5,jira.webresources:util-lite,jira.webresources:util,jira.webresources:feature-flags,com.atlassian.auiplugin:aui-spinner,com.atlassian.jira.jira-client-analytics-plugin:analytics-web-client,jira.webresources:header,jira.webresources:global-static,com.atlassian.jira.plugins.jira-development-integration-plugin:repository-shortcuts-navigation-next,com.atlassian.analytics.analytics-client:js-events,com.atlassian.jira.jira-fileviewer-plugin:fileviewer,com.atlassian.jira.jira-fileviewer-plugin:atlassian-fileviewer,com.atlassian.jira.jira-issue-nav-plugin:stylesheets,com.atlassian.crowd.user-provisioning-vertigo-plugin:impersonation-resources,com.atlassian.jira.jira-atlaskit-plugin:overrides-general,com.atlassian.pas:pas-everypage-static,com.atlassian.auiplugin:dialog2,com.atlassian.jira.jira-atlaskit-plugin:sidebar,com.atlassian.jira.plugins.jira-browser-metrics:contrib,com.atlassian.plugins.browser.metrics.browser-metrics-plugin:api,com.pyxis.greenhopper.jira:gh-create-board-adg3-no-condition,com.atlassian.plugins.browser.metrics.browser-metrics-plugin:impl,-jira.heritage.critical/batch.js?feature-issue-details-jiv-13648-bump-moment-monolith=true&locale=en-US:29:209)

DEPRECATED JS - Dropdown constructor has been deprecated and will be removed in a future release. Use Dropdown2 instead.
at HTMLDocument. (https://dppsafh9ucp3r.cloudfront.net/atl-vertigo--shard-jira-prod-us-29--2--jres.atlassian.net/s/d41d8cd98f00b204e9800998ecf8427e-CDN/6j2xsm/b/8/34f8b02632886523ebde9186cbd94992/_/download/contextbatch/js/jira.webresources:skate,jira.webresources:dialogs,jira.webresources:jira-global,jira.webresources:key-commands,com.atlassian.administration.atlassian-admin-quicksearch-jira:admin-quicksearch-webresources,com.atlassian.jira.plugins.jira-development-integration-plugin:devsummarycf-resources-init,com.atlassian.plugins.atlassian-connect-plugin:jira-atlassian-connect-resources-v5,jira.webresources:util-lite,jira.webresources:util,jira.webresources:feature-flags,com.atlassian.auiplugin:aui-spinner,com.atlassian.jira.jira-client-analytics-plugin:analytics-web-client,jira.webresources:header,jira.webresources:global-static,com.atlassian.jira.plugins.jira-development-integration-plugin:repository-shortcuts-navigation-next,com.atlassian.analytics.analytics-client:js-events,com.atlassian.jira.jira-fileviewer-plugin:fileviewer,com.atlassian.jira.jira-fileviewer-plugin:atlassian-fileviewer,com.atlassian.jira.jira-issue-nav-plugin:stylesheets,com.atlassian.crowd.user-provisioning-vertigo-plugin:impersonation-resources,com.atlassian.jira.jira-atlaskit-plugin:overrides-general,com.atlassian.pas:pas-everypage-static,com.atlassian.auiplugin:dialog2,com.atlassian.jira.jira-atlaskit-plugin:sidebar,com.atlassian.jira.plugins.jira-browser-metrics:contrib,com.atlassian.plugins.browser.metrics.browser-metrics-plugin:api,com.pyxis.greenhopper.jira:gh-create-board-adg3-no-condition,com.atlassian.plugins.browser.metrics.browser-metrics-plugin:impl,-jira.heritage.critical/batch.js?feature-issue-details-jiv-13648-bump-moment-monolith=true&locale=en-US:3665:201)

AJS’s create element functionality has been deprecated since 5.9.0.
No alternative will be provided.
Use document.createElement() or jQuery.parseHTML(), or preferably use a templating library.
[stack trace indicates something in an Atlassian-owned batch.js file]

DEPRECATED JS - Inline dialog constructor has been deprecated and will be removed in a future release. Use inline dialog 2 instead.
at l (https://dppsafh9ucp3r.cloudfront.net/atl-vertigo--shard-jira-prod-us-29--2--jres.atlassian.net/s/d41d8cd98f00b204e9800998ecf8427e-CDN/6j2xsm/b/8/5afb61b052c80124cebeda7092403a6b/_/download/contextbatch/js/jira.heritage.critical/batch.js:6:2054)

3 Likes

Would be really great to use @atlaskit/button and other components with React 18, without any peer dependency warnings and legacy-peer-deps!

Unfortunately,

Atlassian Frontend is only accepting contributions from Atlassian employees

according to the atlassian-frontend-mirror repo – otherwise I’d be happy to open a pull request changing the peerDependencies setting.

5 Likes

Just ran into the same thing.

@ibuchanan any chance Atlassian can review this and see if someone could grace us with a ShipIt update of the repo or something? React 16 support ended 3 years ago (20 Oct 2020) according to React | endoflife.date

1 Like