[BUG] Bento components on NEXTJS - ReferenceError: self is not defined

[Beethoven]

Following guide at

https://bentojs.dev/documentation/guides/bento-next.js-guide/

and gets this error: ReferenceError: self is not defined

[AnuragVasanwala]

Hi @Beethoven 👋🏻

Would you please try using dynamic import with ssr disabled instead of importing conventionally?

Syntax:

import dynamic from "next/dynamic";

const <module_name> = dynamic(() =>
  import(<path>).then((mod) => mod.<component_to_use>),
  { ssr: false }
);

So, this import block:

import {
  BentoAccordion,
  BentoAccordionSection,
  BentoAccordionHeader,
  BentoAccordionContent,
} from '@bentoproject/accordion/react';

import '@bentoproject/accordion/styles.css';

would be written as:

import dynamic from "next/dynamic";

// Use dynamic import with SSR disabled for all imports except CSS
const BentoAccordion = dynamic(() =>
  import("@bentoproject/accordion/react").then((mod) => mod.BentoAccordion),
  { ssr: false }
);
const BentoAccordionSection = dynamic(() =>
  import("@bentoproject/accordion/react").then((mod) => mod.BentoAccordionSection),
  { ssr: false }
);
const BentoAccordionHeader = dynamic(() =>
  import("@bentoproject/accordion/react").then((mod) => mod.BentoAccordionHeader),
  { ssr: false }
);
const BentoAccordionContent = dynamic(() =>
  import("@bentoproject/accordion/react").then((mod) => mod.BentoAccordionContent),
  { ssr: false }
);

import "@bentoproject/accordion/styles.css";

For detailed information on dynamic import, refer https://nextjs.org/docs/advanced-features/dynamic-import

I am also trying to figure out root cause of the issue. Will post when found!

[Beethoven]

Hi @Beethoven 👋🏻

Would you please try using dynamic import with ssr disabled instead of importing conventionally?

Syntax:

import dynamic from "next/dynamic";

const <module_name> = dynamic(() =>
  import(<path>).then((mod) => mod.<component_to_use>),
  { ssr: false }
);

So, this import block:

import {
  BentoAccordion,
  BentoAccordionSection,
  BentoAccordionHeader,
  BentoAccordionContent,
} from '@bentoproject/accordion/react';

import '@bentoproject/accordion/styles.css';

would be written as:

import dynamic from "next/dynamic";

// Use dynamic import with SSR disabled for all imports except CSS
const BentoAccordion = dynamic(() =>
  import("@bentoproject/accordion/react").then((mod) => mod.BentoAccordion),
  { ssr: false }
);
const BentoAccordionSection = dynamic(() =>
  import("@bentoproject/accordion/react").then((mod) => mod.BentoAccordionSection),
  { ssr: false }
);
const BentoAccordionHeader = dynamic(() =>
  import("@bentoproject/accordion/react").then((mod) => mod.BentoAccordionHeader),
  { ssr: false }
);
const BentoAccordionContent = dynamic(() =>
  import("@bentoproject/accordion/react").then((mod) => mod.BentoAccordionContent),
  { ssr: false }
);

import "@bentoproject/accordion/styles.css";

For detailed information on dynamic import, refer https://nextjs.org/docs/advanced-features/dynamic-import

I am also trying to figure out root cause of the issue. Will post when found!

Yes, this works, but the robots can't see the info on Accordion (the same with all Bento Components) as It's not rendered on server, only on client. Thus, all Bento components are useless from the SEO perspective.

[Beethoven]

And the dos on https://bentojs.dev/documentation/guides/bento-next.js-guide/ is wrong. Client-side rendering can increase the likelihood of a poor user experience and for search engine bots. If Bento is for client side only, it's useless.

[slavakurilyak]

Reporting the same self is not defined error here 👇