Pragma cannot be set when runtime is automatic (Nextjs)

[danieldelcore]

Error: 
  × pragma cannot be set when runtime is automatic
   ╭─[/Users/foo/Development/bar/node_modules/@atlaskit/pragmatic-drag-and-drop-react-accessibility/dist/esm/drag-handle-button-base.js:1:1]
 1 │ import _extends from "@babel/runtime/helpers/extends";
 2 │ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 3 │ var _excluded = ["children", "isSelected", "testId", "appearance", "type"];
 4 │ /** @jsx jsx */
   · ───────────────
 5 │ 
 6 │ import { forwardRef } from 'react';
   ╰────

Env:

• React: 18
• Nextjs: 14

[benjosua]

I would try to help but im not able to reproduce this, could you provide a link to a public GitHub repository or a CodeSandbox with a minimal reproduction?

[username14415]

duplicate https://github.com/atlassian/pragmatic-drag-and-drop/issues/67 atlassian hasn't fixed it for years, this topic is from 2022: https://community.developer.atlassian.com/t/unable-to-consume-atlaskit-in-react-18/58519

[alexreardon]

@danieldelcore could this be something to do with emotion? I think that component is using emotion 🤔

[danieldelcore]

Yeah emotion was my first guess, I'm using a newer version of react via nextjs, so I'm probably running into emotion's compatibility issues with modern react. 🤔

[alexreardon]

Maybe your quickest option is to copy base the drag handle button and use your own styling approach

[alexreardon]

Let me know how you go

[lucarampi]

As far as I researched, it's an Emotion-related issue. I had the same problem and I'm not entirely sure how I solved it, but my guess is that adding "use client" might have done the trick.

You can take a look here if it helps.