or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

index.md

tile.json

Confusing Browser Globals

A curated list of browser globals that commonly cause confusion and are not recommended to use without an explicit window. qualifier. Created by Facebook for the Create React App project, this package provides 58 problematic global variable names that can be integrated with ESLint's no-restricted-globals rule to prevent subtle bugs where developers accidentally reference browser globals instead of local variables.

Package Information

Package Name: confusing-browser-globals
Package Type: npm
Language: JavaScript
License: MIT
Keywords: eslint, globals
Installation: npm install confusing-browser-globals

Core Imports

CommonJS (main export method):

const restrictedGlobals = require('confusing-browser-globals');

ESM (for modern projects):

import restrictedGlobals from 'confusing-browser-globals';

Basic Usage

const restrictedGlobals = require('confusing-browser-globals');

// Use with ESLint configuration
module.exports = {
  rules: {
    'no-restricted-globals': ['error'].concat(restrictedGlobals),
  },
};

// Access the array directly
console.log(restrictedGlobals.length); // 58
console.log(restrictedGlobals.includes('event')); // true

Capabilities

Global Variables List

The package exports a single array containing 58 browser global variable names that are commonly accessed accidentally instead of using local variables or explicit window qualification.

/**
 * Array of browser global variable names that commonly cause confusion
 * @type {string[]}
 */
module.exports = [
  'addEventListener',
  'blur',
  'close',
  'closed',
  'confirm',
  'defaultStatus',
  'defaultstatus',
  'event',
  'external',
  'find',
  'focus',
  'frameElement',
  'frames',
  'history',
  'innerHeight',
  'innerWidth',
  'length',
  'location',
  'locationbar',
  'menubar',
  'moveBy',
  'moveTo',
  'name',
  'onblur',
  'onerror',
  'onfocus',
  'onload',
  'onresize',
  'onunload',
  'open',
  'opener',
  'opera',
  'outerHeight',
  'outerWidth',
  'pageXOffset',
  'pageYOffset',
  'parent',
  'print',
  'removeEventListener',
  'resizeBy',
  'resizeTo',
  'screen',
  'screenLeft',
  'screenTop',
  'screenX',
  'screenY',
  'scroll',
  'scrollbars',
  'scrollBy',
  'scrollTo',
  'scrollX',
  'scrollY',
  'self',
  'status',
  'statusbar',
  'stop',
  'toolbar',
  'top'
];

Usage Examples:

const restrictedGlobals = require('confusing-browser-globals');

// Check if a variable name is in the restricted list
function isRestrictedGlobal(name) {
  return restrictedGlobals.includes(name);
}

console.log(isRestrictedGlobal('event')); // true
console.log(isRestrictedGlobal('myVariable')); // false

// ESLint configuration usage
const eslintConfig = {
  rules: {
    'no-restricted-globals': ['error'].concat(restrictedGlobals),
  },
};

// Create React App automatically includes this configuration
// in eslint-config-react-app preset

Common Problem Examples

These globals are problematic because they can be accidentally used instead of intended local variables:

// BAD: Accidentally using global 'event' instead of parameter
function handleClick() { // missing 'event' parameter
  console.log(event.target.value); // Uses window.event global
}

// GOOD: Explicit parameter or window qualification
function handleClick(event) {
  console.log(event.target.value); // Uses local parameter
}

// OR explicitly reference window
function handleClick() {
  console.log(window.event.target.value); // Explicit global access
}

// BAD: Accidentally using global 'name' instead of local variable
function processUser(userData) {
  console.log(name); // Uses window.name instead of userData.name
}

// GOOD: Use intended local reference
function processUser(userData) {
  console.log(userData.name); // Uses intended local property
}

Types

This package exports only JavaScript primitives with no custom types:

/**
 * The main export is an array of strings
 * @type {string[]}
 */
const restrictedGlobals = require('confusing-browser-globals');