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

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?

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?

resolved this so far by adding resolution in package.json, probably not the best way, but the least troublesome. for some reason patch-package was complaining for me because it uses the same package

  "resolutions": {
     "ansi-styles": "^4.3.0"
  }

Hello again, for those looking for a temporary fix, I ended up using patch-package and have this change done to my dependencies. Now it builds with Hermes!

Hopefully, they merge PR https://github.com/chalk/ansi-styles/pull/80 soon so the library works again without this patch.

⚠️ Missing Environment Information ℹ️ Your issue may be missing information about your development environment. You can obtain the missing information by running react-native info in a console.

It’s already there you dummy.

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?

Works for me

Hi @hatem-72!

Good to know!

I have also enabled Hermes for Android, but I did not get the same error there? I thought it was only and iOS issue, but when I think of it, I probably should have gotten an error on Android as well. Strange.

I’m also using “react-native-gesture-handler”: “1.10.3”.

build.gradle:

project.ext.react = [
    entryFile: "index.android.js",
    enableHermes: true,  // clean and rebuild if changing,
    bundleInRelease: true
]

Thanks @yberstad for your temporary fix! You saved my day.

To dig a bit this error is caused by Hermes not supporting Regex Named capture groups. So basically for me both IOS and Android release builds are failing as Hermes is configured on both platforms. In my case it happened just after setting up react-native-gesture-handler in my RN 0.66.3 app.

Now I am wondering what is causing this ansi-styles to be embedded into release builds ?

I found a solution, but probably not optimal, anyway here it goes…

I have considered the following:

• One suggestion I found was to disable hermes in Podfile for development, but I want have the same environment while developing as in production, so that was no option.
• Use patch-package, but since there where so many other dependencies and different versions of ansi-styles I thought that would be a hassle to configure.
• I found it strange that the main.jsbundle would include all npm dev dependencies, but building for production was not an option.

I used the following two other questions to be able to exclude the ansi-styles package from main.jsbundle: https://github.com/facebook/react-native/issues/14400#issuecomment-387017917 https://github.com/facebook/metro/issues/519#issuecomment-862073446

My metro.config.js:

const path = require("path");

const blacklistedModules = ["ansi-styles"];

module.exports = {
  transformer: {
    babelTransformerPath: require.resolve("react-native-typescript-transformer"),
  },
  resolver: {
    resolveRequest: (context, moduleName, platform) => {
      if (blacklistedModules.includes(moduleName)) {
        return {
          filePath: path.resolve(__dirname + "/shim-module.js"),
          type: "sourceFile"
        };
      } else {
        return OriginalResolver.resolve(
          { ...context, resolveRequest: undefined },
          moduleName,
          platform
        );
      }
    }
  }
};

And then add export BUNDLE_CONFIG=./metro.config.js to Bundle React Native code and images.

@aprilmintacpineda, I’m experiencing the same issue now.

I did not quite get how you solved it? Could you please give me a hint?

Thanks in advance!