Window is not defined after a build with Webpack
It may be late to answer but it may help someone else. I also had the ReferenceError: window is not defined.
issue with Webpack 4, and found that adding globalObject: 'this'
line to the output
section in webpack config file fixed my problem:
output: {
globalObject: "this",
filename: "[name].js",
path: path.join(__dirname, "build/package"),
publicPath: "/resources/",
}
You can see the issue was discussed here
and the Webpack documentation about the globalObject
setting here.
Related videos on Youtube
imcze
Updated on June 04, 2022Comments
-
imcze almost 2 years
I am developing a reactJS application and also I am using WebPack 4.29.6 the problem that I face here it is that locally it works everything perfect when I run the npm run dev command while when I want to deploy in server I don't know how to do it I am building the app with the build:production command then it generates /dist folder inside with all files now here I try to run bundle.js it gives me this error: ReferenceError: window is not defined.
these are command's that i use to start my app:
"scripts": { "dev": "cross-env webpack-dev-server --config ./webpack.config.dev.js --mode development", "build:production": "cross-env webpack --config webpack.config.production.js --mode production" }
this is my webpack.config.common.js
const path = require('path'); const webpack = require('webpack'); const outputPath = path.join(__dirname, '/dist'); const port = process.env.PORT || 4000; module.exports = { context: __dirname, entry: './src/index.jsx', resolve: { extensions: ['*', '.js', '.jsx'], }, output: { path: outputPath, publicPath: '/', filename: 'bundle.js', sourceMapFilename: 'bundle.map', }, devServer: { port, historyApiFallback: true, compress: true, contentBase: './dist', }, module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, use: ['babel-loader', 'eslint-loader'], }, { test: /\.less$/, exclude: /node_modules/, use: [ { loader: 'style-loader', }, { loader: 'css-loader', }, { loader: 'less-loader', }, ], }, { test: /\.css$/, use: ['css-loader'], }, { test: /\.svg$/, loader: 'svg-inline-loader', }, { test: /\.(png|jpg|gif|woff(2)?|ttf|eot|svg)$/, exclude: [ /\.(js|jsx|mjs)$/, /\.html$/, /\.json$/, /\.(less|config|variables|overrides)$/, ], use: [ { loader: 'file-loader', }, ], }, ], }, plugins: [ new webpack.ProvidePlugin({ Promise: 'es6-promise-promise', }), ], };
this is my webpack.config.dev.js
const webpack = require('webpack'); const merge = require('webpack-merge'); const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const webpackCommonConfig = require('./webpack.config.common'); module.exports = merge(webpackCommonConfig, { mode: 'development', plugins: [ new HtmlWebpackPlugin({ template: path.join(__dirname, '/index.html'), }), new webpack.HotModuleReplacementPlugin(), new webpack.EnvironmentPlugin({ NODE_ENV: 'development' }), ], devtool: 'inline-source-map', devServer: { hot: true, open: true, }, externals: { // global app config object config: JSON.stringify({ apiUrl: 'http://localhost:3000', }), }, });
this is my webpack.config.production.js
const webpack = require('webpack'); const merge = require('webpack-merge'); const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); const webpackCommonConfig = require('./webpack.config.common'); module.exports = merge(webpackCommonConfig, { mode: 'production', plugins: [new webpack.EnvironmentPlugin({ NODE_ENV: 'production' })], optimization: { minimizer: [ // we specify a custom UglifyJsPlugin here to get source maps in production new UglifyJsPlugin({ cache: true, parallel: true, uglifyOptions: { compress: false, ecma: 6, mangle: true, }, sourceMap: true, }), ], }, devtool: 'source-map', devServer: { compress: true, }, });