NextJs: Element is not Defined when using Intro.js [duplicate]

Question

Why did I get the following error while using intro.js in next my project?

ReferenceError: Element is not defined <br/>

Answer 1

Because intro.js uses the DOM API and on the SSR your document object model is not available.

You need to dynamically import intro.js into your project and disable ssr for it. Something like this should solve your problem:

// component with your intro.js logic

const Steps = dynamic(() => import('intro.js-react').then(mod => mod.Steps), {
  ssr: false
});
const Hints = dynamic(() => import('intro.js-react').then(mod => mod.Hints), {
  ssr: false
});