search

Wondermarin / react-color-palette

🎨 Lightweight Color Picker component for React.
https://codesandbox.io/s/react-color-palette-2zw8q
MIT License
276 stars 30 forks source link

Document is not defined #80

Closed NotDemonix closed 5 days ago

NotDemonix commented 4 weeks ago

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 4 weeks ago

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

NotDemonix commented 4 weeks ago

I could, but the example will require you to login to the site with discord and contact me. Is it possible for you?

pt., 16 sie 2024, 16:41 użytkownik Wondermarin @.***> napisał:

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

— Reply to this email directly, view it on GitHub https://github.com/Wondermarin/react-color-palette/issues/80#issuecomment-2293637580, or unsubscribe https://github.com/notifications/unsubscribe-auth/AVVGIOYSMDV5RMPSSALB223ZRYFQZAVCNFSM6AAAAABMT6RSWSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDEOJTGYZTONJYGA . You are receiving this because you authored the thread.Message ID: @.***>

NotDemonix commented 4 weeks ago

If you would need an example which would give you access to the code and server console. I will need some time to set it up, so please let me know

pt., 16 sie 2024, 16:42 użytkownik Demonix @.***> napisał:

I could, but the example will require you to login to the site with discord and contact me. Is it possible for you?

pt., 16 sie 2024, 16:41 użytkownik Wondermarin @.***> napisał:

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

— Reply to this email directly, view it on GitHub https://github.com/Wondermarin/react-color-palette/issues/80#issuecomment-2293637580, or unsubscribe https://github.com/notifications/unsubscribe-auth/AVVGIOYSMDV5RMPSSALB223ZRYFQZAVCNFSM6AAAAABMT6RSWSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDEOJTGYZTONJYGA . You are receiving this because you authored the thread.Message ID: @.***>

Wondermarin commented 4 weeks ago

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

NotDemonix commented 4 weeks ago

I'm using 14.2.5. It happens only on pages with the react-color-palette component, when the user opens the page (with an "use client";) DIRECTLY, navigating to it from another page doesn't cause the error. Only a refresh or direct open.

pt., 16 sie 2024, 17:15 użytkownik Wondermarin @.***> napisał:

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

— Reply to this email directly, view it on GitHub https://github.com/Wondermarin/react-color-palette/issues/80#issuecomment-2293695663, or unsubscribe https://github.com/notifications/unsubscribe-auth/AVVGIO43LZKNGTGRBH35LXTZRYJP3AVCNFSM6AAAAABMT6RSWSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDEOJTGY4TKNRWGM . You are receiving this because you authored the thread.Message ID: @.***>

Wondermarin commented 4 weeks ago

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

NotDemonix commented 4 weeks ago

Do you maybe have some example which I could modify to what I got?

pt., 16 sie 2024, 23:30 użytkownik Wondermarin @.***> napisał:

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

— Reply to this email directly, view it on GitHub https://github.com/Wondermarin/react-color-palette/issues/80#issuecomment-2294337963, or unsubscribe https://github.com/notifications/unsubscribe-auth/AVVGIO2BBMEKOZHAHYY64ILZRZVNXAVCNFSM6AAAAABMT6RSWSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDEOJUGMZTOOJWGM . You are receiving this because you authored the thread.Message ID: @.***>

Wondermarin commented 4 weeks ago

https://codesandbox.io/p/devbox/billowing-haze-vqhhyy

NotDemonix commented 2 weeks ago

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 2 weeks ago

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 1 week ago

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 5 days ago

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

Wondermarin commented 5 days ago

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.