[bug][ios] main.jsbundle Invalid regular expression: Quantifier has nothing to repeat

Description

running in ios results to this error: main.jsbundle Invalid regular expression: Quantifier has nothing to repeat

It’s referring to this:

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

I found that there are 2 packages that has this code:

node_modules/pretty-format/node_modules/ansi-styles/index.js
node_modules/expect/node_modules/ansi-styles/index.js

https://github.com/chalk/ansi-styles/blob/main/index.js#L132

I have tried all that I can but can’t find a way to fix this.

Version

0.66.1

Output of react-native info

System:
    OS: macOS 11.6
    CPU: (8) x64 Intel(R) Core(TM) i7-6820HQ CPU @ 2.70GHz
    Memory: 439.20 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.11.1 - /var/folders/zg/f6_98ss10lj5b841clyhsxlh0000gn/T/yarn--1634821924400-0.18107403147458956/node
    Yarn: 1.22.16 - /var/folders/zg/f6_98ss10lj5b841clyhsxlh0000gn/T/yarn--1634821924400-0.18107403147458956/yarn
    npm: 8.0.0 - ~/.nvm/versions/node/v16.11.1/bin/npm
    Watchman: 2021.10.11.00 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.10.2 - /Users/aprilmintacpineda/.rvm/gems/ruby-3.0.2/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 15.0, DriverKit 20.4, macOS 11.3, tvOS 15.0, watchOS 8.0
    Android SDK:
      API Levels: 24, 26, 28, 29, 30, 31
      Build Tools: 28.0.3, 29.0.2, 29.0.3, 30.0.2
      System Images: android-24 | Google Play Intel x86 Atom, android-26 | Google APIs Intel x86 Atom, android-28 | Google Play Intel x86 Atom, android-29 | Google Play Intel x86 Atom, android-30 | Google APIs Intel x86 Atom, android-30 | Google Play Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: 4.1 AI-201.8743.12.41.6953283
    Xcode: 13.0/13A233 - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_292 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.2 => 17.0.2
    react-native: 0.66.1 => 0.66.1
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps to reproduce

build on ios

Snack, code example, screenshot, or link to a repository

No response

[danilobuerger]

Hi, there is another solution by @neildhar:

yarn add --dev @babel/plugin-transform-named-capturing-groups-regex

Modify your babel.config.js like so:

diff --git a/babel.config.js b/babel.config.js
index f842b77..d855f9b 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -1,3 +1,4 @@
 module.exports = {
+  plugins: ['@babel/plugin-transform-named-capturing-groups-regex'],
   presets: ['module:metro-react-native-babel-preset'],
 };

If you try out this solution could you please report back if that works for you and your setup?

[bombillazo]

Hey @hatem-72 , @yberstad , I was able to build my app on Android by disabling Hermes. Previously, I was always able to build no problems but something happened in the repo that now fails any build due to this very line:

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

Did any of you resolve the issue? any clue on how to use turn back on Hermes with RN without getting this error?