Server Side Rendering Support

If you use it along next.js, the server side compiling process fails because of a reference error: ReferenceError: document is not defined at new FocusOutlineManager (node_modules/focus-outline-manager/focus-outline-manager.js:34:5) at Object.<anonymous> (node_modules/focus-outline-manager/focus-outline-manager.js:84:1) at Module._compile (internal/modules/cjs/loader.js:701:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10) at Module.load (internal/modules/cjs/loader.js:600:32) at tryModuleLoad (internal/modules/cjs/loader.js:539:12) at Function.Module._load (internal/modules/cjs/loader.js:531:3) at Module.require (internal/modules/cjs/loader.js:637:17) at require (internal/modules/cjs/helpers.js:22:18) at Object.<anonymous> (node_modules/reactour/dist/reactour.cjs.js:7:1) Using it with dynamic import works:

const Tour = dynamic( () => import('reactour'), { ssr: false } )

But you can not test it in a storybook and separate the component from the SSR Framework (it should work on any SSR framework).

[torleifhalseth]

I solved this issue using react-loadable in Gatsby SSR context. Example:

import Loadable from 'react-loadable';

const Tour = Loadable({
  loader: () => import('reactour'),
  loading: () => null,
});

Thanks for the awesome package @elrumordelaluz 💯

[andrewmclagan]

Also nor next js see https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr