Skip to main content

How to Resolve "TypeError: .replaceAll is not a function" Error in JavaScript

The TypeError: x.replaceAll is not a function is an error that occurs for two main reasons: either you are trying to call the .replaceAll() method on a value that is not a string, or your code is running in an older environment (like Internet Explorer) that does not support this modern method.

This guide will explain the common causes of this error and show you the correct ways to solve it by either ensuring your data is a string or by using a cross-browser compatible alternative.

The Core Problem: .replaceAll() is a Modern String Method​

The .replaceAll() method was introduced in ES2021. It is a function that exists exclusively on the String.prototype and is designed to replace all occurrences of a substring.

The error occurs when the value you are calling it on does not have this method.

Example of problem:

// Problem: `myValue` is a number, not a string.
let myValue = 12345;

// ⛔️ TypeError: myValue.replaceAll is not a a function
let result = myValue.replaceAll('3', 'X');

Cause 1 (Most Common): The Variable is Not a String​

This is the most frequent source of the error. You might have a number, an object, null, or undefined and try to call .replaceAll() on it.

Solution: you must first convert the value to a string before you can call a string method on it. The String() constructor is the simplest way to do this.

let myNumber = 12345;

// ✅ Correct: First, convert the number to a string.
let myString = String(myNumber);

let result = myString.replaceAll('3', 'X');
console.log(result); // Output: "12X45"

You can also use optional chaining (?.) to prevent the error if the variable might be null or undefined.

let myVar; // undefined

// ✅ Safe: If `myVar` is nullish, the expression returns `undefined` without an error.
let result = myVar?.replaceAll('a', 'b');
console.log(result); // Output: undefined

Cause 2: Lack of Browser Support (e.g., Internet Explorer)​

The .replaceAll() method is a modern JavaScript feature and is not supported in Internet Explorer or very old versions of other browsers. If your code needs to run in such environments, calling .replaceAll() will throw this error.

Solution: for cross-browser compatibility, you must use the older, universally supported String.prototype.replace() method with a global regular expression.

The Universal Solution: replace() with a Global Regex​

This is the classic and most compatible way to replace all occurrences of a substring.

Logic: the .replace() method, when given a regular expression with the global (g) flag, will replace all matches in a string.

Solution:

function replaceAllCompat(str, find, replace) {
  // We need to escape special characters in the `find` string for the regex
  let escapedFind = find.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
  let regex = new RegExp(escapedFind, 'g');
  
  return str.replace(regex, replace);
}

// Example Usage:
let myString = 'apple-banana-apple';
let newString = replaceAllCompat(myString, '-', ' & ');

console.log(newString); // Output: "apple & banana & apple"
note

If you are replacing a simple, known literal (not a dynamic variable), the syntax is much simpler:

let myString = 'apple-banana-apple';
let newString = myString.replace(/-/g, ' & '); // The regex is written directly

Practical Example: A Robust Replacement Function​

This function demonstrates how to safely perform a "replace all" operation, handling non-string inputs and using the cross-browser compatible replace() method.

/**
 * Replaces all occurrences of a substring in a string.
 * Handles non-string inputs gracefully.
 * @param {*} source The source value, which will be converted to a string.
 * @param {string} find The substring to find.
 *  @param {string} replace The string to replace it with.
 * @returns {string} The new string with all replacements.
 */
function safeReplaceAll(source, find, replace) {
  // 1. Ensure the source is a string.
  let str = String(source ?? '');

  // 2. Escape the `find` string to be safely used in a regex.
  let escapedFind = find.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');

  // 3. Create the global regex and perform the replacement.
  let regex = new RegExp(escapedFind, 'g');
  return str.replace(regex, replace);
}

// Example Usage:
console.log(safeReplaceAll('test-test', '-', '_')); // Output: "test_test"
console.log(safeReplaceAll(123123, '1', 'X'));      // Output: "X23X23"
console.log(safeReplaceAll(null, 'a', 'b'));        // Output: ""

Conclusion​

The TypeError: .replaceAll is not a function is a clear signal that you are either working with the wrong data type or running in an unsupported environment.

  • First, ensure your variable is a string. If it's a number or another primitive, convert it with String(myVar) before calling .replaceAll().
  • If you need to support older browsers like Internet Explorer, you must use the replace() method with a global regular expression as a fallback.
  • Use optional chaining (?.) to prevent errors when a variable might be null or undefined.

Table of Contents