Support Server Side Rendering about react-infinite-scroll-component

[mrchief]

Found this: webpack/webpack#6525. Thanks again for digging into this!

[ankeetmaini]

@mrchief I looked at this issue long and deep. I'm using window only in and after componentDidMount. This is safe for SSR as componentDidMount gets called on the client and not on the server.

To test this out, I took a React SSR boilerplate and added InfiniteScroll component in the shared bundle. And it worked without any errors. first commit

Next, I added your dropdown component and it failed saying window is not defined. At this point I forked your repo, and changed the webpack mode to development so that Dropdown's code isn't minified to debug the issue. (I copy pasted the built files into this repo to access the Dropdown code)

Please see that the error was reported on line number 10, which is output of the IIFE.

I suspect this is because of the way Webpack 4 is generating the UMD definition. I then lowered the Webpack to 2.3.4 which I'm using at work, and built the Dropdown component and it worked fine.

So I'm guessing Webpack 4 is what's causing an issue, and not the infinite scroll component.

I made three commits to this https://github.com/ankeetmaini/infinite-scroll-ssr for you to see the steps.

Let me know if I can help more, and sorry for not getting to it earlier.

[ankeetmaini]

Webpack 2 generates the IIFE like this - it uses this instead of window

(function webpackUniversalModuleDefinition(root, factory) {
	if(typeof exports === 'object' && typeof module === 'object')
		module.exports = factory(require("react"));
	else if(typeof define === 'function' && define.amd)
		define("ReactDropdownTreeSelect", ["react"], factory);
	else if(typeof exports === 'object')
		exports["ReactDropdownTreeSelect"] = factory(require("react"));
	else
		root["ReactDropdownTreeSelect"] = factory(root["React"]);
})(this, function(__WEBPACK_EXTERNAL_MODULE_0__) {
return /******/ (function(modules) { // webpackBootstrap

Webpack 4 produces this

(function webpackUniversalModuleDefinition(root, factory) {
	if(typeof exports === 'object' && typeof module === 'object')
		module.exports = factory(require("react"));
	else if(typeof define === 'function' && define.amd)
		define("ReactDropdownTreeSelect", ["react"], factory);
	else if(typeof exports === 'object')
		exports["ReactDropdownTreeSelect"] = factory(require("react"));
	else
    root["ReactDropdownTreeSelect"] = factory(root["React"]);
})(window, function(__WEBPACK_EXTERNAL_MODULE_react__) {
return /******/ (function(modules) { // webpackBootstrap

[mrchief]

@ankeetmaini Thanks for this deep dive. Let me take a detailed look and get back to you. This is very helpful! 👍