fix regeneratorRuntime is not defined error in LexicalClipboard.prod

[potatowagon]

T214354208 Getting regeneratorRuntime is not defined errors in lexical clipboard . These errors dont seem to cause any noticeble crashes or behavior when i tried to repro, tho i can repro the error in the logs. i was unable to repro the error using the dev build, only prod build.

Research:

About the error and possible fix:
https://stackoverflow.com/questions/61755999/uncaught-referenceerror-regeneratorruntime-is-not-defined-in-react

How async functions are related to the error:
https://stackoverflow.com/questions/65378542/what-is-regenerator-runtime-npm-package-used-for

fix steps: https://babeljs.io/docs/babel-plugin-transform-runtime

root cause:

• error coming from here: https://github.com/facebook/lexical/blob/cleanup-size-limit/packages/lexical-clipboard/src/clipboard.ts#L408

• thrown because of babel transpiler compatibility issues with export async function, which only clipboard uses

• unsure, may or may not be related to the build bundle change introduced in [Breaking Change][*] Chore: Use terser for optimizing cjs prod build #7047, errors started to appear after syncing the most recent sync diff that contains PR7047 over to www

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
lexical	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 4, 2025 2:20pm
lexical-playground	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 4, 2025 2:20pm

[potatowagon]

draft because im waiting for npm install @babel/runtime to complete

but its taking very long - aparently its a very large package and supposedly to go into prod dependencies, is this even a good idea? im afraid to bloat the install

[potatowagon]

install takes too long and hangs the editor each time it completes installing, im gonna try skipping installing @babel/runtime

given the issue only happens for prod builds, im moving "@babel/plugin-transform-runtime" to prod dependency

im semi clueless about what im doing so happy to recieve any advice

[etrepum]

This looks like a configuration issue outside of OSS lexical, whatever is consuming the LexicalClipboard.js is creating this problem. There's no reference to babel or regeneratorRuntime in any of the artifacts produced by OSS lexical. The referenced function in the output JS is the following (from main, after prettier)

exports.copyToClipboard = async function (e, t, r) {
  if (null !== p) return !1;
  if (null !== t)
    return new Promise((n, o) => {
      e.update(() => {
        n(f(e, t, r));
      });
    });
  const i = e.getRootElement(),
    l = e._window || window,
    s = window.document,
    a = o.getDOMSelection(l);
  if (null === i || null === a) return !1;
  const c = s.createElement("span");
  (c.style.cssText = "position: fixed; top: -1000px;"),
    c.append(s.createTextNode("#")),
    i.append(c);
  const d = new Range();
  return (
    d.setStart(c, 0),
    d.setEnd(c, 1),
    a.removeAllRanges(),
    a.addRange(d),
    new Promise((t, i) => {
      const l = e.registerCommand(
        o.COPY_COMMAND,
        (o) => (
          n.objectKlassEquals(o, ClipboardEvent) &&
            (l(),
            null !== p && (window.clearTimeout(p), (p = null)),
            t(f(e, o, r))),
          !0
        ),
        o.COMMAND_PRIORITY_CRITICAL,
      );
      (p = window.setTimeout(() => {
        l(), (p = null), t(!1);
      }, 50)),
        s.execCommand("copy"),
        c.remove();
    })
  );
};

I'm not sure what exactly the closure compiler was doing to avoid triggering this configuration issue because it was very similar (from 0.23.1, after prettier)

exports.copyToClipboard = async function (a, b, c) {
  if (null !== C) return !1;
  if (null !== b)
    return new Promise((h) => {
      a.update(() => {
        h(D(a, b, c));
      });
    });
  var d = a.getRootElement();
  let f = null == a._window ? window.document : a._window.document,
    k = p.getDOMSelection(a._window);
  if (null === d || null === k) return !1;
  let g = f.createElement("span");
  g.style.cssText = "position: fixed; top: -1000px;";
  g.append(f.createTextNode("#"));
  d.append(g);
  d = new Range();
  d.setStart(g, 0);
  d.setEnd(g, 1);
  k.removeAllRanges();
  k.addRange(d);
  return new Promise((h) => {
    let q = a.registerCommand(
      p.COPY_COMMAND,
      (l) => {
        n.objectKlassEquals(l, ClipboardEvent) &&
          (q(),
          null !== C && (window.clearTimeout(C), (C = null)),
          h(D(a, l, c)));
        return !0;
      },
      p.COMMAND_PRIORITY_CRITICAL,
    );
    C = window.setTimeout(() => {
      q();
      C = null;
      h(!1);
    }, 50);
    f.execCommand("copy");
    g.remove();
  });
};

[etrepum]

Without any visibility into what the build toolchain looks like outside of OSS lexical I'm not sure I can provide any more insight other than to confirm that lexical itself isn't really the root cause of what's happening. Async functions have been supported in all browsers updated since ~2018 so there is no good reason for anyone to have a configuration in 2025 that would transpile them to generators with regeneratorRuntime.