running nodemon server.js --> Reference: 'document' is not defined

[kabison33]

Hey Tyler. I used your rrssr-v4 template for my own project. I inserted my react application into the App.js that you created. What happened after running webpack -w is I get the error mentioned above (document is not defined) when I run nodemon server.js. I know document is a DOM variable which should not be defined in the server, hence the error.

Below is my error, package.json, and webpack.config.js. From the error, it looks like it has some problem with the webpack style-loader I use. Do you know why?

ReferenceError: document is not defined
    at insertStyleElement (webpack:///./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js?:93:15)
    at addStyle (webpack:///./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js?:208:13)
    at modulesToDom (webpack:///./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js?:81:18)
    at module.exports (webpack:///./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js?:239:25)
    at eval (webpack:///./src/shared/css/home-style.css?:15:14)

package.json

{

	"scripts": {
		"start": "webpack && nodemon server.js",
		"watch:server": "nodemon server.js",
		"watch:build": "webpack -w",
		"test": "echo \"Error: no test specified\" && exit 1"
	},
	"babel": {
		"presets": [
			"@babel/preset-env",
			"@babel/preset-react"
		],
		"plugins": [
			"@babel/plugin-proposal-object-rest-spread",
                        "@babel/plugin-proposal-class-properties"
		]
	},
	"devDependencies": {
		"@babel/core": "^7.3.4",
		"@babel/plugin-proposal-object-rest-spread": "^7.9.0",
                "@babel/plugin-proposal-class-properties": "^7.10.4",
		"@babel/preset-env": "^7.3.4",
		"@babel/preset-react": "^7.0.0",
		"babel-loader": "^8.1.0",
		"concurrently": "^5.3.0",
		"css-loader": "^4.2.1",
		"file-loader": "^6.0.0",
		"nodemon": "^2.0.4",
		"style-loader": "^1.2.1",
		"url-loader": "^4.1.0",
		"webpack": "^4.42.1",
		"webpack-cli": "^3.3.11",
		"webpack-node-externals": "^1.7.2"
	},
	"dependencies": {
		"cors": "^2.8.5",
		"express": "^4.17.1",
		"isomorphic-fetch": "^2.2.1",
		"npm-run-all": "^4.1.5",
		"pure-react-carousel": "^1.27.1",
		"react": "^16.13.1",
		"react-dom": "^16.13.1",
		"react-router-dom": "4.4.0-beta.8",
		"serialize-javascript": "^3.0.0"
	}
}

webpack.config.js

var path = require('path');
var webpack = require('webpack');
var nodeExternals = require('webpack-node-externals');

var browserConfig = {
	entry: './src/browser/index.js',
	output: {
		path: path.resolve(__dirname, 'public'),
		filename: 'bundle.js',
		publicPath: '/',
	},
	module: {
		rules: [
			{ test: /\.(js)$/, use: 'babel-loader' },
			{
				test: /\.css$/,
				use: ['style-loader', 'css-loader'],
			},
			{
				test: /\.(jpg|png|PNG|svg|jpe?g)$/,
				use: [
					{
						loader: 'file-loader',
						options: {
							outputPath: 'img/',
							publicPath: 'img/',
						},
					},
				],
			},
		],
	},
	mode: 'production',
	plugins: [
		new webpack.DefinePlugin({
			__isBrowser__: 'true',
		}),
	],
	performance: {
		maxEntrypointSize: 512000,
		maxAssetSize: 512000,
	},
};

var serverConfig = {
	entry: './src/server/index.js',
	target: 'node',
	externals: [nodeExternals()],
	output: {
		path: __dirname,
		filename: 'server.js',
		publicPath: '/',
	},
	module: {
		rules: [
			{ test: /\.(js)$/, use: 'babel-loader' },
			{
				test: /\.css$/,
				use: ['style-loader', 'css-loader'],
			},
			{
				test: /\.(jpg|png|PNG|svg|jpe?g)$/,
				use: [
					{
						loader: 'file-loader',
						options: {
							outputPath: 'img/',
							publicPath: 'img/',
						},
					},
				],
			},
		],
	},
	mode: 'production',
	plugins: [
		new webpack.DefinePlugin({
			__isBrowser__: 'false',
		}),
	],
	performance: {
		maxEntrypointSize: 512000,
		maxAssetSize: 512000,
	},
};

module.exports = [browserConfig, serverConfig];