Error when deploying Next.js app to vercel with replaceAll function

Question

I'm getting an error when deploying a next.js app to vercel, local builds are working fine. It's something related to the [replaceAll][1] function

I get this error:

Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: match.replaceAll is not a function
    at /vercel/path0/.next/server/pages/index.js:321:30
    at replaceString (/vercel/path0/node_modules/react-string-replace/index.js:81:17)
    at /vercel/path0/node_modules/react-string-replace/index.js:92:26
    at Array.map (<anonymous>)
    at reactStringReplace (/vercel/path0/node_modules/react-string-replace/index.js:91:25)
    at renderDescription (/vercel/path0/.next/server/pages/index.js:320:56)
    at /vercel/path0/.next/server/pages/index.js:260:57
    at Object.Ja [as useMemo] (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:27:240)
    at EventInfo (/vercel/path0/.next/server/pages/index.js:260:50)

I use it in a function called renderDescription in this component file, but I declare it outside of the component, I removed some irrelevant code:

import React, { FC, useMemo } from "react";
import { GitHubEventsApi } from "../models/events.d";
import styles from "../../../styles/EventInfo.module.scss";
import reactStringReplace from "react-string-replace";
import { iconsObjFontello } from "../utils";
import { useInView } from "react-intersection-observer";

interface props {
  className?: string;
  type: GitHubEventsApi.EventType;
  repo: GitHubEventsApi.Repo;
  payload: GitHubEventsApi.Payload;
  createdAt: string;
  index?: number;
}

const EventInfo: FC<props> = ({
  className,
  type,
  repo,
  createdAt,
  payload,
  index,
}) => {
  const { ref, inView, entry } = useInView({
    threshold: 0.2,
  });

  const description = useMemo(
    () => renderDescription(type, repo, payload),
    [type, repo, payload]
  );

  const url = useMemo(
    () =>
      repo.url.replace("https://api.github.com/repos/", "https://github.com/"),
    [repo]
  );

  const date = useMemo(() => Intl.DateTimeFormat("en-US", {
    day: "numeric",
    month: "short",
    year: "numeric",
  }).format(Date.parse(createdAt)), [createdAt]);

  return (
    <div
      className={`${styles.eventInfo} ${inView ? styles.inView : ""}`}
      ref={ref}
    >
      <span className={styles.revealBlock}></span>
      <p className={`${styles.description}`}>
        {index}
        {description}
        <i className={iconsObjFontello[type]} />
      </p>
      <span className={styles.revealBlock}></span>
      <p className={styles.description}>
        <a href={url} target="_blank">
          {repo.name}
        </a>
      </p>
      <span className={styles.revealBlock}></span>
      <p className={styles.date}>{date}</p>
    </div>
  );
};

export default EventInfo;


const renderDescription = (
  type: GitHubEventsApi.EventType,
  repo: GitHubEventsApi.Repo,
  payload: GitHubEventsApi.Payload
) => {
  const linkToRepo = "<a href={repo.url}>{repo.name}</a>";
  let description: React.ReactNodeArray;

  //add info from payload
  description = reactStringReplace(
    eventText[type],
    /{{(.*?)}}/g,
    (match, i) => {
      let removeBraces = match.replaceAll(/[{{}}]/g, "");
      let split = removeBraces.split(".");
      return <span key={`${match}-${i}`}>{payload[split[1]]}</span>;
    }
  );

  return description;
};


Any ideas how I can solve this?

  [1]: https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/String/replaceAll

Answer 1

What is the node version? If I'm not mistaken, replaceAll is new from ES2021 and so it doesn't work in some browsers, and for node it only works from version >= 15.

You can try to update the Node version to a newer version, or you can try to replace replaceAll with .replace(/[{{}}]/g, "");

If I'm not mistaken, it has the same behavior in this case.