react-refresh plugin in combination with focusAtom causes `ReferenceError: t is not defined` in nextJS app router

[Cielquan]

I have a nextJS application using the app router. I added jotai and the swc plugins. When I later added jotai-optics to use focusAtom I got ReferenceError: t is not defined. I first thought my translation tooling got broken through the focusAtom somehow. But after some testing I could nail it down to the combination of the react-refresh plugin in combination with focusAtom.

Reproduction: https://github.com/Cielquan/jotai-swc-plugin-error The repro is a simple default nextjs app, where I added the dependencies and a client component using focusAtom and activated the plugin.

$ pnpm dev

> [email protected] dev /home/admin-riedelc/projects/jotai-swc-plugin-error
> next dev

   ▲ Next.js 14.1.0
   - Local:        http://localhost:3000
   - Experiments (use at your own risk):
     · swcPlugins

 ✓ Ready in 1255ms
 ○ Compiling / ...

warn - No utility classes were detected in your source files. If this is unexpected, double-check the `content` option in your Tailwind CSS configuration.
warn - https://tailwindcss.com/docs/content-configuration
 ✓ Compiled / in 5.2s (490 modules)
 ⨯ ReferenceError: t is not defined
    at __webpack_require__ (/home/admin-riedelc/projects/jotai-swc-plugin-error/.next/server/webpack-runtime.js:33:42)
    at eval (./src/components/SomeClientComponent.tsx:8:70)
    at (ssr)/./src/components/SomeClientComponent.tsx (/home/admin-riedelc/projects/jotai-swc-plugin-error/.next/server/app/page.js:173:1)
    at __webpack_require__ (/home/admin-riedelc/projects/jotai-swc-plugin-error/.next/server/webpack-runtime.js:33:42)