Webpack 4 for SSR, How to solve this ReferenceError: window is not defined?

Question

I have 3 webpack.config files to enable Server-Sive-Rendering.

• webpack.base.js
• webpack.client.js
• webpack.server.js

Build Script

"scripts": {
        "dev": "npm-run-all --parallel dev:*",
        "dev:bundle": "nodemon --watch build --exec \"node build/bundle.js\"",
        "dev:server": "webpack --config webpack.server.js --watch",
        "dev:client": "webpack --config webpack.client.js --watch"
      }

I was struggling to setup css on SSR.

When I tried :

• npm run dev:client -> It works with no error!

• npm run dev:server -> It works with no error!

but, npm run dev:bundle I got an error message.

Here is my webpack settings

webpack.base.js

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const devMode = process.env.NODE_ENV !== 'production';

module.exports = {
    module: {
        rules: [
            {
                test: /\.js?$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                options: {
                    presets: [
                        'react',
                        'stage-0',
                        ['env', { target: { browsers: ['last 2 versions'] }}]
                    ]
                }
            },
            {
                test: /\.(sa|sc|c)ss$/,
                    use: [
                    devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader',
                    'sass-loader',
                ],
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: devMode ? '[name].css' : '[name].[hash].css',
            chunkFilename: devMode ? '[id].css' : '[id].[hash].css',
        })
    ]
}; 

webpack.client.js

const path = require('path');
const merge = require('webpack-merge');
const baseConfig = require('./webpack.base.js');

const config = {
    mode: 'development',
    //Tell webpack the root file of our
    //server application
    entry: './src/client/client.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'public')
    }
};

module.exports = merge(baseConfig, config);

webpack.server.js

const path = require('path');
const merge = require('webpack-merge');
const baseConfig = require('./webpack.base.js');
const webpackNodeExternals = require('webpack-node-externals');
const config = {

    //Inform webpack that we're building a bundle
    //for nodeJS, rather than for the browser
    mode: 'development',
    target: 'node',
    entry: './src/index.js',

    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'build')
    },

    externals: [webpackNodeExternals()]
};

module.exports = merge(baseConfig, config);

package.json

{
  "name": "shawnbaek.com",
  "version": "1.0.0",
  "description": "Server-Side-Rendering Wordpress Site",
  "main": "index.js",
  "scripts": {
    "dev": "npm-run-all --parallel dev:*",
    "dev:bundle": "nodemon --watch build --exec \"node build/bundle.js\"",
    "dev:server": "webpack --config webpack.server.js --watch",
    "dev:client": "webpack --config webpack.client.js --watch"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/ShawnBaek/shawnbaek.com.git"
  },
  "keywords": [
    "wordpress"
  ],
  "author": "Shawn Baek",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/ShawnBaek/shawnbaek.com/issues"
  },
  "homepage": "https://github.com/ShawnBaek/shawnbaek.com#readme",
  "dependencies": {
    "autoprefixer": "^9.1.5",
    "axios": "^0.18.0",
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "clean-webpack-plugin": "^0.1.19",
    "compression": "^1.7.2",
    "concurrently": "^3.5.1",
    "css-loader": "^1.0.0",
    "express": "^4.16.3",
    "express-http-proxy": "^1.2.0",
    "html-webpack-plugin": "^3.2.0",
    "lodash": "^4.17.10",
    "mini-css-extract-plugin": "^0.4.3",
    "node-sass": "^4.9.3",
    "nodemon": "^1.17.4",
    "npm-run-all": "^4.1.2",
    "postcss": "^7.0.2",
    "postcss-loader": "^3.0.0",
    "react": "^16.3.2",
    "react-dom": "^16.3.2",
    "react-helmet": "^5.2.0",
    "react-redux": "^5.0.7",
    "react-router-config": "^1.0.0-beta.4",
    "react-router-dom": "^4.2.2",
    "redux": "^4.0.0",
    "redux-thunk": "^2.2.0",
    "sass-loader": "^7.1.0",
    "serialize-javascript": "^1.5.0",
    "style-loader": "^0.23.0",
    "tailwindcss": "^0.6.6",
    "webpack": "^4.7.0",
    "webpack-dev-server": "^3.1.4",
    "webpack-merge": "^4.1.2",
    "webpack-node-externals": "^1.7.2"
  },
  "devDependencies": {
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "webpack-cli": "^2.1.2"
  }
}

Answer 1

add globalObject: 'this' within output block to fix this issue