0

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

1 Answer 1

2

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.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.