Wondermarin/react-color-palette

Document is not defined

NotDemonix opened this issue · 13 comments

NotDemonix commented

My Environment

Dependency Version
Node.JS version v21.7.3
react-color-palette version v7.2.2

Expected Behavior:

There should be no errors

Actual Behavior:

When a user navigates to a page with react-color-palette elements, there's no error. However if they refresh the site, there's an error in the console:

ReferenceError: document is not defined
    at Object.toHex (/home/container/.next/server/chunks/4784.js:1:7006)
    at Object.convert (/home/container/.next/server/chunks/4784.js:1:6550)
    at f (/home/container/.next/server/chunks/4784.js:5:4209)
    at I (/home/container/.next/server/app/dashboard/[guildid]/tickets/panels/[id]/page.js:1:5791)
    at nj (/home/container/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:46251)
    at nM (/home/container/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:47571)
    at nN (/home/container/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64546)
    at nI (/home/container/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:47010)
    at nM (/home/container/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:47717)
    at nM (/home/container/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:61546) {
  digest: '2960734530'
}

Additional Context:

The page has "use client"; at the top. I'm not using the ColorService utils.

Wondermarin commented

Could you please provide a link to an example where this error can be reproduced?

NotDemonix commented
NotDemonix commented
Wondermarin commented

I think it's unsafe. Which version of Next.js are you using, and in what context does it occur?

NotDemonix commented
Wondermarin commented

I tried to reproduce your issue, but I couldn't. Could you provide a code example that triggers the error using CodeSandbox?

NotDemonix commented
NotDemonix commented

Hi Wondermarin, sorry that it took this long but I didn't find time. So I tested out a bunch of stuff and turns out that (at least on "use client" pages), when you set useColor like this:
const [color, setColor] = useColor("");
triggers the error (ONLY WHEN BUILD). I will make a contribution which will fix this issue.

Wondermarin commented

Please provide a link to an example where your issue can be reproduced. Even when passing an empty string to useColor as an argument, I still couldn't replicate your error.

NotDemonix commented

The error is triggered when you build. On my own project it errors in runtime and doesn't crash. On the sandbox it doesn't even let you build.
https://codesandbox.io/p/devbox/billowing-haze-forked-l5tyf3

NotDemonix commented

Hi! Did you have time to look into it yet?

Wondermarin commented

Hello! Your issue is related to Next.js and SSR. Next.js tries to pre-render your component on the server, even if you explicitly specify the "use client" directive. I can suggest two solutions for you:

  1. Disable SSR for the component where the library is used.

color-picker.tsx

"use client";

import { ColorPicker, useColor } from "react-color-palette";

export default function MyColorPicker() {
  const [color, setColor] = useColor("red");

  return (
    <ColorPicker color={color} onChange={setColor} />
  );
}

page.tsx

import dynamic from "next/dynamic";

const ColorPicker = dynamic(() => import("../components/color-picker"), {
  ssr: false,
});

export default function Page() {
  return (
    <ColorPicker />
  );
}
  1. Pass a default value to useColor (one that doesn't need to be converted by the library). This value will be rendered on the server, and then you can change it to the necessary value using useEffect (since in this hook we can call browser APIs), so that it gets rendered on the client side.

color-picker.tsx

"use client";

import { ColorPicker, useColor, ColorService } from "react-color-palette";

export default function MyColorPicker() {
  const [color, setColor] = useColor("#000000");
  
  useEffect(() => {
    setColor(ColorService.convert("hex", "red"));
  }, [setColor]);

  return (
    <ColorPicker color={color} onChange={setColor} />
  );
}

page.tsx

import ColorPicker from "../components/color-picker";

export default function Page() {
  return (
    <ColorPicker />
  );
}

In the future, I'll work on improving SSR support in the library, but for now, these are all the solutions I can offer you.