Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

ReferenceError: document is not defined

See original GitHub issue

Relevant code:

package.json

        ...
	"main": "dist/main.js",
	"files": ["dist/", "package.json", "README.md"],
	"devDependencies": {
		"@babel/core": "^7.2.2",
		"@babel/plugin-proposal-class-properties": "^7.2.1",
		"@babel/preset-env": "^7.2.0",
		"@babel/preset-react": "^7.0.0",
		"babel-core": "7.0.0-bridge.0",
		"babel-jest": "^23.6.0",
		"babel-loader": "^8.0.4",
		"babel-plugin-emotion": "^10.0.5",
		"enzyme": "^3.8.0",
		"enzyme-adapter-react-16": "^1.7.1",
		"jest": "^23.6.0",
		"jest-emotion": "^10.0.5",
		"webpack": "^4.27.1",
		"webpack-cli": "^3.1.2"
	},
	"dependencies": {
		"@emotion/core": "^10.0.5",
		"@emotion/styled": "^10.0.5",
		"debounce": "^1.2.0",
		"prop-types": "^15.6.2",
		"react": "^16.6.3",
		"react-dom": "^16.6.3"
	},
	"scripts": {
		"build": "./node_modules/.bin/webpack --config=webpack.config.js",
		"test": "./node_modules/.bin/jest"
	}
        ...

webpack.config.js

const path = require("path")

module.exports = {
	entry: "./src/index.js",
	mode: "production",
	output: {
		path: path.resolve("./dist"),
		filename: "[name].js",
		libraryTarget: "commonjs2",
		libraryExport: "default"
	},
	module: {
		rules: [
			{
				test: /\.jsx?$/,
				exclude: /node_modules/,
				use: "babel-loader"
			}
		]
	}
}

src/components/body/elements.js

import styled from "@emotion/styled"
import { css, jsx } from "@emotion/core"

export const Wrapper = styled.div`
  background-color: red;
`

src/components/body/index.js

import { Wrapper } from "./elements"

class Body extends React.Component {
	render() {
		const {
			children,
			containerClassName,
			layerIndex
		} = this.props
		return <Wrapper>{children}</Wrapper>
	}
}

src/index.js

import React from "react"
import ReactDOM from "react-dom"
import PropTypes from "prop-types"
import { debounce } from "debounce"

import Body from "./components/body"

const isBrowser = typeof document !== "undefined" ? true : null

class SimpleModal extends React.Component {
	static defaultProps = {
		mountPointSelector: "body",
		containerClassName: "SimpleModal",
		layerPosition: "above",
		defaultIndex: 100
	}
	_getLayerIndex = () => {
		const { layerPosition, defaultIndex } = this.props
		const allModals = this._getOtherModals()
		const totalModals = allModals && allModals.length ? allModals.length : 0
		var nextIndex = defaultIndex
		if (layerPosition === "above") {
			nextIndex += totalModals
		}
		if (layerPosition === "below") {
			nextIndex -= totalModals
		}
		return nextIndex
	}
	_getOtherModals = (modal) => {
		if (!isBrowser) {
			return
		}
		const { containerClassName } = this.props
		// Get all the elements on the page with the classname modal.
		const otherModals = [].slice.call(
			document.getElementsByClassName(containerClassName)
		)
		// If we got ourselves as an argument, rmeove it from the list of
		// elements we return.
		if (modal) {
			return otherModals.filter((el) => {
				return el !== modal
			})
		}
		// Otherwise, return them all.
		return otherModals
	}
	_getMountPoint = () => {
		if (!isBrowser) {
			return
		}
		const { mountPointSelector } = this.props
		return document.querySelector(mountPointSelector)
	}
	render() {
		const {
			children,
			isVisible,
			containerClassName
		} = this.props
		// If the element is visible...
		if (isVisible) {
                        if(!isBrowser){
                                return null
                        }
			// Then, create the portal element in the DOM, under the BODY.
			const mountPoint = this._getMountPoint()
			const layerIndex = this._getLayerIndex()
			const modal = (
				<Body containerClassName={containerClassName} layerIndex={layerIndex}>
					{children}
				</Body>
			)
			return ReactDOM.createPortal(modal, mountPoint)
		} else {
			return null
		}
	}
}

export default SimpleModal

What you did: I am attempting to rebuild a package that I maintain. However, the default component will function after being compiled by webpack. It will render correctly after a jest test though. Any attempt to use this package in another project results in a ReferenceError at runtime. I have pieced the <SimpleModal> component back together, to try and find the culprit, and it’s the styled <Wrapper> element.

What happened: Rendering <Wrapper> as an element inside <Body> component raises a ReferenceError: document is not defined.

Issue Analytics

State:
Created 5 years ago
Comments:12 (3 by maintainers)

Top GitHub Comments

6reactions

kkorachcommented, Feb 22, 2019

I ran into the same problem when trying to use v10 with react-on-rails. v9 worked fine. Switching the webpack target unfortunately isn’t an option for us. I haven’t had a chance to dig into the source too much, but somewhere the test of whether we are in a browser or not changed between v9 and v10.

4reactions

dachinatcommented, Feb 11, 2019

i don’t think changing a target is good option.