Support regex named capture groups

[bombillazo]

Problem

Follow up on #89 :
Currently, when using Hermes to build a React Native app, when it tries to include a dependency using regex named capture groups, the app build process crashes.

Example code from real dependency:

const matches = /(?<colorString>[a-f\d]{6}|[a-f\d]{3})/i.exec(hex.toString(16));

Build Error: SyntaxError: Invalid RegExp pattern: Quantifier has nothing to repeat, js engine: hermes
'?<colorString>' being the invalid pattern.

Solution

I am unfamiliar with the required work to solve this, but I am assuming the Hermes Javascript engine core would need to be upgraded to add support for named capture groups. Update the engine parse/lexer to process named groups? Use an existing regex library?

[neildhar]

Thanks for sharing this. As shared in the previous issue, named capture groups are an ES2018 feature that we have not implemented in Hermes yet. Note that for most cases, you should be able to get away with a babel transform for named capture groups, as described here.

[thomazcapra]

@neildhar thanks, after installing the @babel/plugin-transform-named-capturing-groups-regex and adding it in the plugin array in my babel.config.js file, it works now :) 🚀

[visitsb]

@neildhar thanks for the babel transform suggestion!

[fbmal7]

Wanted to update this thread- named capture groups will be supported natively by Hermes soon! The work is already done, we are just making some minor changes and revisions now. It will most likely be landing in the next week or so!

[Nantris]

@fbmal7 any ETA? I found this is quite a problem for us - and unfortunately adding @babel/plugin-transform-named-capturing-groups-regex does not resolve it, surprisingly - React Native@0.70.5

[Nantris]

Friendly bump. @fbmal7 any news?

Edit: I'd also encourage people upvoting the comments further down to upvote the first comment, as repo maintainers can see which issues have the most thumbs-ups.

[fbmal7]

@slapbox Sorry I should have updated this thread again earlier! Native support for named capture groups has been in hermes since Oct 7th, with c2d622.

RN 0.70 was first cut on Jul 15th. RN 0.71 was first cut on Nov 3rd. So, named capture groups won't be usable in RN 0.70, but should be there in 0.71.

[maximilize]

If you can't upgrade to 0.71 now, you also can try a workaround.

1. Install @babel/plugin-transform-named-capturing-groups-regex. This should solve errors inside your own code
2. Fixing node_modules is more tricky. Run the babel cli directly on the file with the invalid regexes. You can find all by using hermesc against a js bundle. Then use the regex from the warnings of hermesc and search for the files, for eg via grep -r '(?P<foobar' node_modules.
3. Apply babel on this files: npx babel node_modules/foo/bar.js >/tmp/x.js && mv /tmp/x.js node_modules/foo/bar.js
4. To save your changes, create patches of the modified modules: npx patch-package foobar

[malwatte]

In my case I use create a Regex with the search text entered by the user.

const searchRegex = new RegExp(searchText, 'i');
items.filter(itm => searchRegex.test(itm));

Getting similar errors when users enters +, (, *, etc.

For the moment I'm adding extra \ and it fixes the issue

searchText= searchText
        .replace(/\\/gm, '\\\\')
        .replace(/\./gm, '\\.')
        .replace(/\+/gm, '\\+')
        .replace(/\(/gm, '\\(')
        .replace(/\)/gm, '\\)')
        .replace(/\?/gm, '\\?')
        .replace(/\*/gm, '\\*')
        .replace(/\|/gm, '\\|')
        .replace(/\[/gm, '\\[')
        .replace(/\]/gm, '\\]');

But I don't like this workaround. Is there a better way to fix this issue?

(I'm using react-native 0.68.3)

[ljharb]

@malwatte that's a really quick way to break things, since it's very unsafe to put unsanitized user input into a regex.

[malwatte]

@ljharb Appreciate if you can suggest better way to do. I need to do a search using the user input text. Thanks.

[Nantris]

@malwatte https://www.npmjs.com/package/escape-string-regexp