Make all HOCs node-safe

.eslintrc.js

@@ -1,3 +1,9 @@
 module.exports = {
-  'extends': '@launchpadlab/eslint-config/react'
-}
+  extends: '@launchpadlab/eslint-config/react',
+  // Enforce isomorphic code (node and browser)
+  env: {
+    browser: false,
+    node: false,
+    'shared-node-browser': true,
+  },
+}

src/connectQuery.js

@@ -7,6 +7,7 @@ import {
   noop,
   parse,
   wrapDisplayName,
+  isServer,
 } from './utils'
 
 /**
@@ -49,6 +50,8 @@ import {
 
 function connectQuery (mappingConfig = noop, { camelize = true } = {}) {
   function modify (props) {
+    if (isServer()) return
+    // eslint-disable-next-line no-undef
     const query = parse(window.location.search)
     const casedQuery = camelize ? camelizeKeys(query) : query
     const primitiveQuery = mapValues(casedQuery, coerce)

src/modal.js

@@ -1,7 +1,7 @@
 import React from 'react'
 // import PropTypes from 'prop-types'
 import { connectModal, show, hide, destroy } from 'redux-modal'
-import { isEvent } from './utils'
+import { isEvent, isServer } from './utils'
 import Modal from 'react-modal'
 
 /**
@@ -60,6 +60,12 @@ import Modal from 'react-modal'
  * )(Layout)
  */
 
+function getRootElement () {
+  if (isServer()) return
+  // eslint-disable-next-line no-undef
+  return document.querySelector('#root')
+}
+
 // Default modal wrapper.
 function DefaultModalComponent({ show, handleHide, ...rest }) {
   return (
@@ -70,7 +76,7 @@ function DefaultModalComponent({ show, handleHide, ...rest }) {
       className="modal-inner"
       overlayClassName="modal-fade-screen"
       bodyOpenClassName="modal-open"
-      appElement={document.querySelector('#root')}
+      appElement={ getRootElement() }
       {...rest}
     />
   )

src/onOutsideClick.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { callWithProps, wrapDisplayName } from './utils'
+import { callWithProps, wrapDisplayName, isServer } from './utils'
 
 /**
  * A function that returns a React HOC to handle logic to be run when a click occurs outside of a component.
@@ -51,13 +51,17 @@ export default function onOutsideClick (handler) {
        * Bind click handler to document on mount
        */
       componentDidMount () {
+        if (isServer()) return
+        // eslint-disable-next-line no-undef
         document.addEventListener('click', this.handleClickOutside)
       }
 
       /*
        * Unbind click handler from document on unmount
        */
       componentWillUnmount () {
+        if (isServer()) return
+        // eslint-disable-next-line no-undef
         document.removeEventListener('click', this.handleClickOutside)
       }
 

src/utils/getEnvVar.js

@@ -1,8 +1,14 @@
 import { get } from 'lodash/fp'
+import isServer from './isServer'
 
 // Attempts to retrieve an environment variable from process.env 
 
 function getEnvVar (varName) {
+  // On the server, retrieve vars from process
+  // eslint-disable-next-line no-undef
+  if (isServer()) return get(`env.${ varName }`, process)
+  // Otherwise, retrieve vars from window.process
+  // eslint-disable-next-line no-undef
   return get(`process.env.${ varName }`, window)
 }
 

src/utils/index.js

@@ -46,4 +46,5 @@ export createMapperFunc from './createMapperFunc'
 export isEvent from './isEvent'
 export isImage from './isImage'
 export isPdf from './isPdf'
+export isServer from './isServer'
 export { createRoutesFromReactChildren } from './routeUtils'

src/utils/isServer.js

@@ -0,0 +1,7 @@
+// Returns true when code is running in server mode
+
+function isServer() {
+  return typeof window === 'undefined'
+}
+
+export default isServer