Puter.js via import module intermittently fail during hot reload

[reynaldichernando]

Hi team, I've been getting this error when developing my app in nextjs using the new npm install puter js

Seems like after every change and hot reload it shows this error

when i commented the puter import, it's back working again.

how i'm importing it:

import puter from "@heyputer/puter.js";

i have to stop the server and rerun the application (npm run dev) in order for it to function again

btw that specific error line is not helping, it's just showing the webpack import

my nextjs version: 15.5.4 puterjs version: 2.0.13

[ProgrammerIn-wonderland]

It's probably related to server side rendering and the fact that puter in node is completely different from puter in the client

[ProgrammerIn-wonderland]

You might need to "use client" wherever you're using puter js

[reynaldichernando]

i see, it does make sense it won't mix well with SSR

it's this repo btw https://github.com/Puter-Apps/stampy

all place where i import puter are already on use client 🤔

• https://github.com/Puter-Apps/stampy/blob/main/components/ChatBox.tsx
• https://github.com/Puter-Apps/stampy/blob/main/components/Sidebar.tsx

probably inner workings of nextjs, causing it to fail even if it already has use client

although this does seem to me like a non issue for puterjs, since it's client library but can we keep the issue open for now, i'll try to make another sample repo to replicate the error in various situation

[reynaldichernando]

wait i actually take back my statement about non issue since we want puter js to run on nodejs, which isn't a browser env 🤔

[jelveh]

I'm assigning this to @Salazareo since he has a lot of React experience.

[jelveh]

What's the status of this?

[reynaldichernando]

hi team, sharing an update:

i managed to make it not break on client side hot reload by using dynamic import (thanks @Salazareo) https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import

made a small util for it

// lib/getPuter.ts
import type { Puter } from "@heyputer/puter.js";

let puterInstance: Puter;

export const getPuter = async () => {
  if (!puterInstance && typeof window !== "undefined") {
    const { puter } = await import("@heyputer/puter.js");
    puterInstance = puter;
  }

  return puterInstance;
};

then using it is just by calling the getter, when needed

const puter = await getPuter();

i don't think its a good idea to keep re-importing, because i think it will re init the whole auth and everything, which is why i did the caching with global var

the above solves the hot reload issue

---

regarding using the library without doing this workaround, i'm not too sure about it last discussion we had, there was a blocker which may break the cdn import version, CMIIW @Salazareo