Support server-side rendering (undefined 'window' and 'document') about react-virtualized HOT 16 CLOSED

Hm... this isn't a server-rendered page, by chance? Sorry, just realized what you meant by "SSR". :)

Afraid I'll need more context to be of much help. Any chance you could post a Plunker/Jsbin?

from react-virtualized.

I just published version 2.6.2 with a check for document. Let me know if this resolves the issue for you? (Reopen this issue if it doesn't.)

from react-virtualized.

Re-opening as per our conversation, now getting the following error:

[1] [piping] error given was: TypeError: Cannot read property 'requestAnimationFrame' of undefined
[1]     at /node_modules/react-virtualized/dist/react-virtualized.js:302:23
[1]     at Object.exports.__esModule (/node_modules/react-virtualized/dist/react-virtualized.js:308:6)

from react-virtualized.

@bvaughn thanks for taking this on.
I've been working around it by injecting the react-virtualized components in componentDidMount.

What's your solution to this? return if window === undefined?

from react-virtualized.

No problem. That's a nice work-around in the meanwhile.

I'm actually hoping I can switch to another element resize library that properly handles this (because I don't really want to reinvent the wheel there- that isn't part of the virtualization domain really). We'll see. :)

from react-virtualized.

I've been working around it by injecting the react-virtualized components in componentDidMount.

@frankleng I was thinking of setting a flag in componentDidMount which will allow react-virtualized to be rendered. Is that what you were also saying by 'injecting component in componentDidMount'?

from react-virtualized.

@bvaughn sounds good. was also thinking about doing a prerender a few rows on server to accelerate mobile rendering. might put a PR in once I have more time.

from react-virtualized.

Happy to accept PRs :)

from react-virtualized.

@oyeanuj something like that.
my render method is doing return this.content
this.content by default is an ajax spinner
in componentDidMount() I call a method that does

this.content = (<AutoSizer />);
this.forceUpdate();

reason I didn't simply set a flag is because I have to import react-virtualized components inside that client-side render method. If you load it at the class level, it'll complain about document

from react-virtualized.

Afraid the rabbit hole goes deeper than I feared.

I patched the window/document issue WRT the resize detection only to get burned by the Webpack style-loader.

Edit: I wonder if the application using react-virtualized (in this case a boilerplate app?) could work around this by disabling styles for server-side via new webpack.IgnorePlugin(/\.(css)$/)?

from react-virtualized.

@bvaughn I can try that.

Another thought: Would it make sense that the the <ChildComponent .. in AutoSizer.js is loaded on componentDidMount instead of render to avoid the problem?

from react-virtualized.

I have an idea that's showing some promise even thought it's a little weird. Basically I'm deferring the import of styles and element-resize code until componentDidMount (so that I'm sure we're actually on the client) and then re-rendering.

This feels a little dirty though. Thoughts?

Edit 1: I think I'm okay with deferring resize loading until the componentDidMount but I think deferring styles feels too hackish. The

Edit 2: The style-loader issue in @oyeanuj's boilerplate project can be fixed by updating the Webpack style-loader test from /\.scss$/ to /\(.css|.scss)$/. like so:

diff --git a/webpack/dev.config.js b/webpack/dev.config.js
index 3627f77..22c9119 100755
--- a/webpack/dev.config.js
+++ b/webpack/dev.config.js
@@ -67,7 +67,7 @@ module.exports = {
       { test: /\.jsx?$/, exclude: /node_modules/, loaders: ['babel?' + JSON.stringify(babelLoaderQuery), 'eslint-loader']},
       { test: /\.json$/, loader: 'json-loader' },
       { test: /\.less$/, loader: 'style!css?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version!less?outputStyle=expanded&sourceMap' },
-      { test: /\.scss$/, loader: 'style!css?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version!sass?outputStyle=expanded&sourceMap' },
+      { test: /\(.css|.scss)$/, loader: 'style!css?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version!sass?outputStyle=expanded&sourceMap' },
       { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff" },
       { test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff" },
       { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream" },
@@ -88,6 +88,7 @@ module.exports = {
     // hot reload
     new webpack.HotModuleReplacementPlugin(),
     new webpack.IgnorePlugin(/webpack-stats\.json$/),
+    new webpack.IgnorePlugin(/\.(css|less)$/),
     new webpack.DefinePlugin({
       __CLIENT__: true,
       __SERVER__: false,
diff --git a/webpack/prod.config.js b/webpack/prod.config.js
index 7a610f6..0078b98 100755
--- a/webpack/prod.config.js
+++ b/webpack/prod.config.js
@@ -35,7 +35,7 @@ module.exports = {
       { test: /\.jsx?$/, exclude: /node_modules/, loaders: [strip.loader('debug'), 'babel']},
       { test: /\.json$/, loader: 'json-loader' },
       { test: /\.less$/, loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=2&sourceMap!autoprefixer?browsers=last 2 version!less?outputStyle=expanded&sourceMap=true&sourceMapContents=true') },
-      { test: /\.scss$/, loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=2&sourceMap!autoprefixer?browsers=last 2 version!sass?outputStyle=expanded&sourceMap=true&sourceMapContents=true') },
+      { test: /\(.scss|css)$/, loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=2&sourceMap!autoprefixer?browsers=last 2 version!sass?outputStyle=expanded&sourceMap=true&sourceMapContents=true') },
       { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff" },
       { test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff" },
       { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream" },

from react-virtualized.

@oyeanuj @frankleng Please check out release 2.7.5. I am now deferring the element resize until componentDidMount which should enable server-side rendering.

from react-virtualized.

I am going to close this issue for now as I think it has been resolved. Please reach out to me on Discord and/or reopen it if you are still having troubles. :)

from react-virtualized.

FYI I've created issue #48 to (hopefully) further simplify things.

from react-virtualized.

This seems to re-occur in 9.10.0:

myProj/node_modules/react-virtualized/dist/commonjs/utils/animationFrame.js:21
var request = win.requestAnimationFrame || win.webkitRequestAnimationFrame || win.mozRequestAnimationFrame || win.oRequestAnimationFrame || win.msRequestAnimationFrame || function (callback) {
                 ^
TypeError: Cannot read property 'requestAnimationFrame' of undefined

in 9.9.0 all is ok.
I am using Grid

@bvaughn

from react-virtualized.