FIX (ssr) [#66]: incompatible with SSR closes #66

CHANGELOG.md

@@ -1,3 +1,6 @@
+### v4.0.0
+*  FIX (ssr) [#66]: incompatible with SSR closes #66 [View](https://github.com/sanusart/react-dropdown-select/commit/e1a882dae3a298a75ad9cc6b6c11810a48a8cae8)
+
 ### v3.12.0
 *  FEATURE (events) [#70]: Remove selected option on key press of backspace button, closes #70 (#71) [View](https://github.com/sanusart/react-dropdown-select/commit/30a2aee405af2981eaa3aeb2a246f1d46f3647af)
 

package.json

@@ -1,10 +1,11 @@
 {
   "name": "react-dropdown-select",
-  "version": "3.12.0",
+  "version": "4.0.0",
   "description": "Customizable dropdown select for react",
   "main": "dist/react-dropdown-select.js",
   "module": "lib/index.js",
   "types": "types.d.ts",
+  "sideEffects": false,
   "files": [
     "dist",
     "lib",
@@ -30,11 +31,11 @@
   "bundlesize": [
     {
       "path": "./dist/react-dropdown-select.js",
-      "maxSize": "15 kB"
+      "maxSize": "20 kB"
     },
     {
       "path": "./lib/index.js",
-      "maxSize": "15 kB"
+      "maxSize": "20 kB"
     }
   ],
   "keywords": [
@@ -114,7 +115,6 @@
       "!coverage/**"
     ]
   },
-  "sideEffects": false,
   "browserslist": [
     "last 2 versions",
     "not dead",

src/components/Dropdown.js

@@ -5,7 +5,7 @@ import { LIB_NAME } from '../constants';
 import NoData from '../components/NoData';
 import Item from '../components/Item';
 
-import { valueExistInSelected, hexToRGBA } from '../util';
+import { valueExistInSelected, hexToRGBA, isomorphicWindow } from '../util';
 
 const dropdownPosition = (props, methods) => {
   const DropdownBoundingClientRect = methods.getSelectRef().getBoundingClientRect();
@@ -16,7 +16,7 @@ const dropdownPosition = (props, methods) => {
     return props.dropdownPosition;
   }
 
-  if (dropdownHeight > window.innerHeight && dropdownHeight > DropdownBoundingClientRect.top) {
+  if (dropdownHeight > isomorphicWindow().innerHeight && dropdownHeight > DropdownBoundingClientRect.top) {
     return 'top';
   }
 
@@ -81,7 +81,7 @@ const DropDown = styled.div`
     dropdownPosition === 'top'
       ? `bottom: ${selectBounds.height + 2 + dropdownGap}px`
       : `top: ${selectBounds.height + 2 + dropdownGap}px`};
-  
+
   ${({ selectBounds, dropdownGap, portal }) =>
     portal
       ? `
@@ -100,7 +100,7 @@ const DropDown = styled.div`
   max-height: ${({ dropdownHeight }) => dropdownHeight};
   overflow: auto;
   z-index: 9;
-  
+
   :focus {
     outline: none;
   }

src/index.js

@@ -11,7 +11,7 @@ import Clear from './components/Clear';
 import Separator from './components/Separator';
 import DropdownHandle from './components/DropdownHandle';
 
-import { debounce, hexToRGBA, isEqual, getByPath, getProp, valueExistInSelected } from './util';
+import { debounce, hexToRGBA, isEqual, getByPath, getProp, valueExistInSelected, isomorphicWindow } from './util';
 import { LIB_NAME } from './constants';
 
 export class Select extends Component {
@@ -95,8 +95,8 @@ export class Select extends Component {
 
   componentDidMount() {
     this.props.portal && this.props.portal.appendChild(this.dropdownRoot);
-    window.addEventListener('resize', debounce(this.updateSelectBounds));
-    window.addEventListener('scroll', debounce(this.onScroll));
+    isomorphicWindow().addEventListener('resize', debounce(this.updateSelectBounds));
+    isomorphicWindow().addEventListener('scroll', debounce(this.onScroll));
 
     this.dropDown('close');
 
@@ -146,11 +146,11 @@ export class Select extends Component {
 
   componentWillUnmount() {
     this.props.portal && this.props.portal.removeChild(this.dropdownRoot);
-    window.removeEventListener(
+    isomorphicWindow().removeEventListener(
       'resize',
       debounce(this.updateSelectBounds, this.props.debounceDelay)
     );
-    window.removeEventListener('scroll', debounce(this.onScroll, this.props.debounceDelay));
+    isomorphicWindow().removeEventListener('scroll', debounce(this.onScroll, this.props.debounceDelay));
   }
 
   onDropdownClose = () => {

src/util.js

@@ -30,7 +30,7 @@ export const getByPath = (object, path) => {
     return;
   }
 
-  return path.split('.').reduce((acc, value) => acc[value], object)
+  return path.split('.').reduce((acc, value) => acc[value], object);
 };
 
 export const getProp = (object, path, defaultValue) => {
@@ -46,3 +46,11 @@ export const getProp = (object, path, defaultValue) => {
 
   return getProp(object[normalizedPath.shift()], normalizedPath, defaultValue);
 };
+
+export const isomorphicWindow = () => {
+  if (typeof window == 'undefined') {
+    global.window = {};
+  }
+
+  return window;
+};

webpack.config.js

@@ -1,6 +1,5 @@
 const path = require('path');
 const webpack = require('webpack');
-const TerserPlugin = require('terser-webpack-plugin');
 
 module.exports = {
   entry: path.join(__dirname, 'src/index.js'),
@@ -9,28 +8,10 @@ module.exports = {
     filename: 'react-dropdown-select.js',
     library: 'reactDropdownSelect',
     libraryTarget: 'umd',
+    umdNamedDefine: true,
+    globalObject: 'this'
   },
-  optimization: {
-    minimizer: [
-      new TerserPlugin({
-        parallel: true,
-        terserOptions: {
-          sourceMap: true,
-          compress: {
-            arguments: true,
-            drop_console: true,
-            unsafe_proto: true,
-            unsafe_methods: true,
-            unsafe_comps: true,
-            unsafe_arrows: true
-          },
-          output: {
-            comments: false
-          },
-        }
-      }),
-    ],
-  },
+  target: 'node', // for support ssr in emotionjs
   externals: {
     react: {
       commonjs: 'react',