Unable to consume atlaskit in React 18

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.

4 Likes

Hi @SachaWeatherstone

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

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

2 Likes

@bjornbrynjar Thanks :innocent:

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.

2 Likes

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

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.

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