How to Fix ReferenceError window is not defined in JavaScript

Window is not defined javascript – How to Fix ReferenceError window is not defined in JavaScript?

by

Window is not defined javascript: The “ReferenceError: window is not defined” error can occur for a variety of causes, including:

  • When you the windowin Node.js.
  • Using the windowon the server (for example server-side rendering in Next.js).
  • When the windowglobal variable is misspelled. It must be all lowercase.

Here the windowrepresents a window containing a DOM document and is only available in the browser.

NOTE:

Since Node.js is a server-side runtime and does not provide a browser environment, 
we cannot use the window variable in Node.

Fixing ReferenceError window is not defined in JavaScript

Example: index.html

Referenceerror: window is not defined: If your browser displays “ReferenceError: window is not defined,” try moving your JS <script/> tag to the bottom of the <body/>tag:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <!-- Write your HTML body here -->
    <p>Hello this is Btechgeeks</p>


    <!--Moving the script tag at bottom of body -->
    <!-- Adding type as module in the script   -->
    <script type="module" src="index.js"></script>
  </body>
</html>

Output:

Hello this is Btechgeeks
  • You may have addons that are executed before the DOM is created.
  • The window global variable denotes the window in which the script is being run (browser side).

To know Whether you’re in the Browser or Server

Javascript window is not defined: If you’re using React.js or Next.js and need to know if you’re in the browser (can use window) or on the server (can’t use window), perform the following:

// Check if the type of window is not equal to 'undefined' using // the if conditional statement 
if (typeof window !== 'undefined') {
  // If it is true then print 'we are on the browser'
  console.log('Hey!!! we are on the browser')
  // We can use 'window' here
} else {
  // Else print ' we are on the server'
  console.log('Hey!! we are on the server')
  // We must NOT use window here
}

Output:

Hey!! we are on the server

Explanation:

  • Here we checked if the global window variable has a type other than undefined.
  • If we have the window global defined, we are on the browser and can use the window variable.

If we write the same code in the browser then the type of window returns an object.

Input:

console.log(typeof window)

Output:

object

NOTE:

  • To fix the “ReferenceError: window is not defined” error, simply use the window global variable on the browser.
  • The variable represents a DOM document in a window and cannot be used on the server-side (example in Node.js).

Using global in Node.js

Referenceerror: window is not defined nextjs: If you need to define global variables in Node.js, use global rather than window

index.js:

// Declare a variable using global
global.data = 'Hello Btechgeeks';

We now use the above variable in another file:

another_File.js:

// Import the above index.js file using the import keyword
import './index.js';
// Print the same variable(global.data) which is present in index.js file
// Here it returns 'Hello Btechgeeks' of index.js
console.log(global.data);

Output:

Hello Btechgeeks

Another Simple Method

Window is not defined: However, it is far more convenient to just export a variable from the index.js file and import it as needed.

index.js:

// Declare a const and export it using the export keyword
export const data = 'Hello Btechgeeks';

We now import the above same variable(data) into another file.

another_File.js:

// Declare a const variable and export it using the export keyword
export const data = 'Hello Btechgeeks';

// Import the variable present in the index.js file(data)
// using the import keyword
import {data} from './index.js';
// print the variable of index.js file 
// Here it returns 'Hello Btechgeeks' of index.js
console.log(data);

Output:

Hello Btechgeeks

NOTE:

Using this export is a far better, and more efficient approach than defining global variables.