Next.js Discord

Discord Forum

Dynamically importing functionality. Wait with component render.

Unanswered
Orinoco Crocodile posted this in #help-forum
Open in Discord
Orinoco CrocodileOP
Hello!

I'm utilizing Nivo (a graph library) in Nextjs:
https://nivo.rocks/

Nivo was built on "old standards" so to render the graphs I'm doing:
const ResponsiveLine = dynamic(
  () => import("@nivo/line").then(({ ResponsiveLine }) => ResponsiveLine),
  { ssr: false },
);

export default () => <ResponsiveLine>...</ResponsiveLine>


Which works fine.

However Nivo also has a "@nivo/core" package from which I'd like to extract the "linearGradientDef"-function.

How do I go about doing this the best way? I pretty much want to block rendering the component until linearGradientDef is available.

5 Replies

Orinoco CrocodileOP
Sidenote: the project is running the old /pages router rather than /app. Had it been /app I'm pretty sure I could just:

export default async () => {
  const { linearGradientDef } = await import("@nivo/core");

  return <ResponsiveLine defs={[linearGradientDef(...yadayada
}
Orinoco CrocodileOP
The dynamic function from nextjs are meant for Components as far as I know? I'm trying to import a function from a package (oh and I tried it and it didn't work)
B33fb0n3
oh ok :/
Orinoco CrocodileOP
I found a ghetto solution:
export default () => {
  useEffect(() => {
    (async () => {
      const nivoCore = await import("@nivo/core");

      setLinearGradientDef(
        nivoCore.linearGradientDef("gradientA", [
          { offset: 0, color: "inherit" },
          { offset: 100, color: "inherit", opacity: 0 },
        ]),
      );
    })();
  }, []);

  if (!linearGradientDef) return null;
 
  // Don't call linearGradientDef as a function - it was already
  return <ResponsiveLine defs={[linearGradientDef]}
}