ReferenceError: Alert is not defined in JavaScript [Solved]

# Table of Contents

1. ReferenceError: Alert is not defined in JavaScript
2. ReferenceError: Prompt is not defined in JavaScript

# ReferenceError: Alert is not defined in JavaScript

The "ReferenceError: alert is not defined" occurs when the alert() method is used outside of the browser environment, most commonly in Node.js.

The alert() method is a method on the window object, which is only available in the browser.

# Use console.log when outside the browser

To solve the "alert is not defined" error, use the console.log or console.error methods instead of alert when outside the browser.

The console.log and console.error methods allow us to output a message to the web console or standard output and error if you're on the server side.

Copied!
console.log('hello');

console.error('an error occurred');

If you use a console.log() statement in a browser environment, open your developer tools by pressing F12 and then click on the Console tab to view the output.

If you use a console.log() statement on the server, look at your terminal to view the output if you have a server running or run your script with node yourScript.js and then look at your terminal.

# Checking if you are on the browser or the server

If you got the error in a browser, you might be using server-side rendering (e.g. with Next.js), or you might have misspelled alert (all lowercase).

Copied!
alert('hello');

If you get the error when using server-side rendering, you can conditionally check if you're on the browser (can use alert) or you are on the server (can't use alert).

Copied!
if (typeof window !== 'undefined') {
  console.log('You are on the browser')
  // 👉️ can use alert()
} else {
  console.log('You are on the server')
  // 👉️ can't use alert()
}

In our if statement, we check if the window global variable is not undefined. If it is defined, we can use the alert method.

Copied!
console.log(alert === window.alert); // 👉️ true

If we check whether alert is equal to window.alert in a browser environment, we get true back.

The window global variable represents the window that contains the DOM (browser side only).

An easy way to think about it is that in a browser, each tab is represented by its own Window object.

I've also written an article on how to display a variable value in an Alert box in JS.

# ReferenceError: Prompt is not defined in JavaScript

You might also get the ReferenceError: Prompt is not defined error when you try to use the prompt() method outside the browser.

To resolve the issue, check if you are on the browser before calling window.prompt() or use the prompt-sync package.

Here is an example of how the error occurs.

Copied!
const result = prompt('What is your favorite number?');

console.log(result);

If you issue the node index.js command, I get the following error:

Copied!
ReferenceError: prompt is not defined

The error is caused because the prompt method is available on the window object and not in Node.js.

The prompt() method is used to display a dialog with a message in the browser and prompt the user to enter some text.

The method returns a string containing the text that was entered by the user or null if the user didn't enter any text.

# Checking if you are on the Browser

If you use Next.js or other similar client and server-side technologies, you can check if you are on the browser or the server using the typeof operator.

Copied!
if (typeof window !== 'undefined') {
  const result = prompt('What is your favorite number?');

  console.log(result);
}

Since the prompt() method is only available on the browser, we first check if the window variable is defined.

If the variable is defined, we can safely call the method.

In all other cases, we are on the server, so trying to call the window.prompt() method would raise a ReferenceError.

# Using the prompt() method on the server in Node.js

You can use a third-party package to be able to use the prompt() method in Node.js.

1. Initialize a package.json file by running the following command.

Copied!
npm init -y

2. Install the prompt-sync package.

Copied!
# with NPM
npm install prompt-sync

# or with YARN
yarn add prompt-sync

3. Import and use the prompt() method from the prompt-sync package.

Copied!
// using ES6 import statement
import createPrompt from 'prompt-sync';

const prompt = createPrompt();

const result = prompt('What is your favorite number: ');
console.log(result);

If you use the older require() syntax, import the prompt-sync module as follows.

Copied!
// using commonJS require() statement
const createPrompt = require('prompt-sync');

const prompt = createPrompt();

const result = prompt('What is your favorite number: ');
console.log(result);

The prompt-sync package enables us to use the prompt() method in a Node.js environment.

You can read more about the module's API and its configuration options in its NPM Readme page.