ReferenceError: window is not defined with ReactJS

Question

Good evening, I'm using react 16.3.2 on Ubuntu and am wanting to integrate my new react application with this software.

My webpack.fly.config.js file:

const path = require("path");
const webpack = require("webpack");
const bundlePath = path.resolve(__dirname, "dist/");

module.exports = {
  entry: "./src/index.js",
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
query: { presets: ['react']}
      },
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      }
    ]
  },
  resolve: { extensions: ['*', '.js', '.jsx'] },
  output: {
    publicPath: bundlePath,
    filename: "bundle.js"
  },
  devServer: {
    contentBase: path.join(__dirname,'public'),
    port: 3000,
    publicPath: "http://localhost:3000/dist"
  },
  plugins: [ new webpack.HotModuleReplacementPlugin() ]
};

Which I don't think is the issue, because when I run fly server the server begins to run, but when I go to refresh my localhost webpage, I get the error below:

ReferenceError: window is not defined at module.exports (bundle.js:5:41) at bundle.js:728:10 at () at /usr/local/lib/node_modules/@fly/fly/lib/default_context_store.js:47:30

My index.js file:

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

And my index.html:

<!-- sourced from https://raw.githubusercontent.com/reactjs/reactjs.org/master/static/html/single-file-example.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>React Starter</title>
  </head>
  <body>
    <div id="root"></div>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <script src="../dist/bundle.js"></script>
  </body>
</html>

React and Webpack are both still pretty new to me, so I'm not even sure what this error is or what it means.

Could someone shed some light here and point me in the right direction?

Fly is a JavaScript CDN startup - see here https://fly.io. I’m working on integrating their tech with React because they go hand in hand. — logos_164, May 28 '18 at 01:40
I would guess you or it (the software) are accidentally including file(s) that were not meant to be included server side — Patrick Evans, May 28 '18 at 01:41
Thanks Patrick, can you elaborate on that? Where would I have told it this? In the config file? — logos_164, May 28 '18 at 01:42

score 0 · Answer 1 · answered May 28 '18 at 01:51

0

Search for 'window' in your code and make sure it is executed when client side using !SERVER or similar.

answered May 28 '18 at 01:51

Pawan Gangwani

182
8

ReferenceError: window is not defined with ReactJS

1 Answers1