Unable to consume atlaskit in React 18

Atlassian Ecosystem Design
,
1

Upon compiling my react 18 app with a number of the atlaskit components the following error is thrown:

node_modules/.pnpm/@atlaskit+tooltip@17.5.10_ohobp6rpsmerwlq5ipwfh5yigy/node_modules/@atlaskit/tooltip/dist/esm/Tooltip.js: pragma and pragmaFrag cannot be set when runtime is automatic.

  1 | import _extends from "@babel/runtime/helpers/extends";
    | ^
  2 | import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
  3 | import _defineProperty from "@babel/runtime/helpers/defineProperty";

Any workarounds would be much appreciated, thanks.

8 Likes
2

Hi @SachaWeatherstone

Did you manage to get a workaround? I am facing the same issue

3

@SachaWeatherstone, @ajay, I just came across the same problem and found a solution.

Adding the following string:

/** @jsxRuntime classic */

To line number #1, in the file referenced in your error log (Tooltip.js under node_modules), resolved the problem for me :wink:

3 Likes
4

@bjornbrynjar Thanks :innocent:

5

Same issue here. Would be great if this issue was patched directly in the Tooltip package, because editing file in node_modules is not suitable for production.

3 Likes
6

You are right @clement_garin!

It would be great to get feedback from someone knowledgeable @Atlassian on this. I see from the following page: Atlaskit by Atlassian
Documented supported dependences include React 16.8.0 (released feb. 2019), and styled-components 3.2.0. (released in May 2018) I am assuming this is outdated info, or is it?

Peer dependencies
Packages in this repository can have peer dependencies. When installing a package make sure to have these installed first:
With npm
npm i react@^16.8.0 react-dom@^16.8.0 styled-components@^3.2.0

1 Like
7

I’m getting the same issue with React 18 and the code block component

[commonjs--resolver] /home/circleci/project/frontend/node_modules/@atlaskit/code/dist/esm/code.js: pragma and pragmaFrag cannot be set when runtime is automatic.
8

@Atlassian any plans for an update or atlas kit is already deprecated?

9

@SachaWeatherstone did you managed to find a workaround? We are also facing this issue. We would like to use the atlaskit components in our nextjs app as we would like to import jira apps into it. But somehow I always get into a dependency issue and braking the app.
Any workaround will be appreciated or suggestions.

10

Hey @atlassian devs, did anyone manage to find a resolution for this issue?

11

Also seeing this issue in a React 18 Nx project, would appreciate an update to atlaskit

2 Likes
12

I’m also getting this issue. It really prevents us to use the Tooltip component… No updates yet?