pmndrs / swc-jotai

MIT License
90 stars 14 forks source link

enable `@swc-jotai/react-refresh` in next.js@14.0.4 will cause pages using 'use client' error #21

Open seiry opened 7 months ago

seiry commented 7 months ago

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 commented 7 months ago

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 commented 7 months ago

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 commented 7 months ago

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 commented 7 months ago

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: https://github.com/pmndrs/swc-jotai/issues/24. So currently I forcibly stopped using the plugin.