'ReferenceError: document is not defined' when used in server rendered React

[dsernst]

Adding Zenscroll leads to a fatal error in server-side rendered React applications.

Error

document is not defined

ReferenceError: document is not defined
    at createScroller (/Users/dsernst/Documents/my-project/node_modules/zenscroll/zenscroll.js:59:17)
    at /Users/dsernst/Documents/my-project/node_modules/zenscroll/zenscroll.js:209:24
    at defaultDuration (/Users/dsernst/Documents/my-project/node_modules/zenscroll/zenscroll.js:43:20)
    at Object.<anonymous> (/Users/dsernst/Documents/my-project/node_modules/zenscroll/zenscroll.js:47:2)
    at Module._compile (module.js:413:34)
    at Module._extensions..js (module.js:422:10)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/dsernst/Documents/my-project/node_modules/babel-core/lib/api/register/node.js:214:7)
    at Module.load (module.js:357:32)
    at Function.Module._load (module.js:314:12)
    at Module.require (module.js:367:17)

This happens as soon as the module is imported. Still a problem even if none of its methods will be invoked during the server's pre-render.

Just needs to ensure document exists, and silently skip that function if not.

[zengabor]

Hi @dsernst

Sorry about that. I thought Zenscroll would be used only in browsers.

A fix for this is simple but this might be not the only error, so I need to test it in a non-browser environment. Give me some time.

[dsernst]

No worries, thanks for the quick response.

Here's a reference of another module that went through this fix: tjallingt/react-youtube#57 (and other linked issues and commits)

[dsernst]

Here's a temp fix in case anyone else has this problem:

diff --git a/components/ExampleComponent.js b/components/ExampleComponent.js
index 9aa4409..06a3d25 100644
--- a/components/ExampleComponent.js
+++ b/components/ExampleComponent.js
@@ -9,7 +9,7 @@ import List from '../List'
 import DownloadButton from '../DownloadButton'
-import zenscroll from 'zenscroll'
+let zenscroll

 class ExampleComponent extends Component {
   static propTypes = {
@@ -19,6 +19,7 @@ class ExampleComponent extends Component {
   }

   componentDidMount() {
+    zenscroll = require('zenscroll') // see https://github.com/zengabor/zenscroll/issues/9
   }

This waits until after the component mounts before importing the library, so that it's skipped during server-side pre-render.

[zengabor]

Hi @dsernst, this is now fixed in 3.0.2