New 'negative lookbehind' regex breaks in IOS & Safari versions < 16.4

[lllleonnnn]

Initial checklist

• I read the support docs
• I read the contributing guide
• I agree to follow the code of conduct
• I searched issues and couldn’t find anything (or linked relevant results below)

Affected packages and versions

2.0.1

Link to runnable example

No response

Steps to reproduce

Run latest 2.0.1 on any Safari version below 16.4

Expected behavior

Expected behavior is that no errors should be thrown

Actual behavior

When using this as part of rendering markdown in React apps, will throw SyntaxError: Invalid regular expression: invalid group specifier name and crash application.

Affected runtime and version

'browser'@2.0.1

Affected package manager and version

No response

Affected OS and version

iOS <= 16.3

Build and bundle tools

No response

[ChristianMurphy]

Welcome @nowfred! 👋
This project targets ES2022, older versions of the spec are not part of the support matrix.

Safari 16.4 and below do not support ES2022 out of the box.
You can transpile/polyfill this with babel, take a look at https://github.com/slevithan/babel-plugin-transform-regex

Related to remarkjs/react-markdown#800 and remarkjs/react-markdown#822

[github-actions]

Hi! This was closed. Team: If this was fixed, please add phase/solved. Otherwise, please add one of the no/* labels.

[lllleonnnn]

Thank you @ChristianMurphy no worries - I personally appreciate finding issues like this when I'm debugging so wanted to leave for posterity. Appreciate your prompt reply and explanation.

[vktrl]

Welcome @nowfred! 👋 This project targets ES2022, older versions of the spec are not part of the support matrix.

Safari 16.4 and below do not support ES2022 out of the box. You can transpile/polyfill this with babel, take a look at https://github.com/slevithan/babel-plugin-transform-regex

Related to remarkjs/react-markdown#800 and remarkjs/react-markdown#822

@ChristianMurphy, please reconsider using a backwards-compatible regex or an option to specify one.

It can't be polyfilled and the babel transformer does not fix it.

Check the REPL and see that the pattern that's causing the problem is not being transformed: /(?<=^|\s|\p{P}|\p{S})([-.\w+]+)@([-\w]+(?:\.[-\w]+)+)/gu

For anyone else having this problem, I'm using pnpm to force compatible version for now:

// .pnpmfile.cjs

function readPackage(pkg, context) {
  if (pkg.name === 'mdast-util-gfm') {
    pkg.dependencies = {
      ...pkg.dependencies,
      'mdast-util-gfm-autolink-literal': '2.0.0',
    };
    context.log('mdast-util-gfm -> mdast-util-gfm-autolink-literal@2.0.0');
  }

  return pkg;
}

module.exports = {
  hooks: {
    readPackage,
  },
};