Fix various issues related to Next.js and SSR

Author: HiDeoo

CHANGELOG.md

@@ -1,6 +1,7 @@
 ## Unreleased
 
 * Add missing TypeScript `title` attribute type to steps.
+* Fix various issues related to Next.js and SSR.
 
 ## 0.6.0
 

src/components/Hints/index.js

@@ -4,6 +4,7 @@ import { Component } from 'react';
 
 import * as introJsPropTypes from '../../helpers/proptypes';
 import * as introJsDefaultProps from '../../helpers/defaultProps';
+import { isServer } from '../../helpers/server';
 
 /**
  * Intro.js Hints Component.
@@ -92,6 +93,10 @@ export default class Hints extends Component {
    * Installs Intro.js.
    */
   installIntroJs() {
+    if (isServer()) {
+      return;
+    }
+
     this.introJs = introJs();
 
     const { onClick, onClose } = this.props;

src/components/Hints/index.test.js

@@ -3,6 +3,7 @@ import renderer from 'react-test-renderer';
 import { shallow } from 'enzyme';
 
 import Hints from './index';
+import * as server from '../../helpers/server';
 
 /**
  * Hints.
@@ -119,4 +120,12 @@ describe('Hints', () => {
 
     expect(wrapper.instance().introJs.onHintClose).toBe(onClose);
   });
+
+  test('should not install intro.js during SSR', () => {
+    jest.spyOn(server, 'isServer').mockReturnValueOnce(true);
+
+    const wrapper = shallow(<Hints hints={hints} />);
+
+    expect(wrapper.instance().introJs).toBe(null);
+  });
 });

src/components/Steps/index.js

@@ -5,6 +5,7 @@ import { renderToStaticMarkup } from 'react-dom/server';
 
 import * as introJsPropTypes from '../../helpers/proptypes';
 import * as introJsDefaultProps from '../../helpers/defaultProps';
+import { isServer } from '../../helpers/server';
 
 /**
  * Intro.js Steps Component.
@@ -221,6 +222,10 @@ export default class Steps extends Component {
    * Installs Intro.js.
    */
   installIntroJs() {
+    if (isServer()) {
+      return;
+    }
+
     this.introJs = introJs();
 
     this.introJs.onexit(this.onExit);

src/components/Steps/index.test.js

@@ -4,6 +4,7 @@ import renderer from 'react-test-renderer';
 import { shallow } from 'enzyme';
 
 import Steps from './index';
+import * as server from '../../helpers/server';
 
 jest.useFakeTimers();
 
@@ -344,4 +345,12 @@ describe('Steps', () => {
 
     expect(wrapper.instance().introJs._introItems[0].element).toEqual(expect.any(HTMLDivElement));
   });
+
+  test('should not install intro.js during SSR', () => {
+    jest.spyOn(server, 'isServer').mockReturnValueOnce(true);
+
+    const wrapper = shallow(<Steps initialStep={0} steps={steps} onExit={() => {}} />);
+
+    expect(wrapper.instance().introJs).toBe(null);
+  });
 });

src/helpers/server.js

@@ -0,0 +1,3 @@
+export function isServer() {
+  return typeof window === 'undefined';
+}