enable @swc-jotai/react-refresh in [email protected] will cause pages using 'use client' error

[seiry]

reproduce step

1. init a new next.js repo
2. install jotai and @swc-jotai/react-refresh
3. enable @swc-jotai/react-refresh in next.config.js
4. add a jotai atom in a page with 'use client'
5. get the error

reproduce repo

https://github.com/seiry/jotai-refresh-use-client/blob/e2f069f9761f35c75d23a9e71f6a13a279275e9a/next.config.js#L6

log

./app/page.tsx
ReactServerComponentsError:

The "use client" directive must be placed before other expressions. Move it to the top of the file to resolve this issue.

   ╭─[/Users/seiry/gitwork/jotai-refresh-use-client/app/page.tsx:1:1]
 1 │ 'use client'
   · ────────────
 2 │ import { atom, useAtom } from 'jotai'
 3 │ 
 4 │ const valueAtom = atom('hello')
   ╰────

Import path:
  ./app/page.tsx

It seems the plugin added some line at the file header.( sorry I'm not a rust master lol

[trevorpfiz]

I am getting this error as well. Next.js 14.1.0 and @swc-jotai/react-refresh.

Development experience with all the full reloads is not great 🤣

[McCulloughRT]

I'm getting this error in Next.js 14.1.0 and @swc-jotai/react-refresh as well. Agreed it seems the plugin is adding lines above the "use client" directive, causing Next.js problems. Also agreed that my knowledge of Rust is not enough to assist in fixing this, just wanted to raise another flag that something is amiss.

[BrandenXia]

I also got the same problem with Next.js 14.1.0 and @swc-jotai/react-refresh. Is there any temporary solution to this?

[Cielquan]

I had my atoms in a seperate file and it worked. Just don't add "use client" to the atom file but just the componet file and import the atoms. Worked for me until I started using focusAtom which caused another issue: #24. So currently I forcibly stopped using the plugin.

[theogravity]

Also having this issue as well. I had originally added it because I found that jotai-ssr wouldn't work without it. In the end, jotai-ssr didn't work for me (nothing was updating properly) and I had to go back to using useHydrateAtoms([], { dangerouslyForceHydrate: true }) in my next.js stuff.