Repository navigation
[bug][ios] main.jsbundle Invalid regular expression: Quantifier has nothing to repeat #32453
Description
Activity
⚠️ Missing Environment Information ℹ️ Your issue may be missing information about your development environment. You can obtain the missing information by running react-native infoin a console.Reacted by April Mintac Pineda⚠️ Missing Environment Information
ℹ️ Your issue may be missing information about your development environment. You can obtain the missing information by runningreact-native infoin a console.It's already there you dummy.
Reacted by Pavlos Vinieratos and Bryce KoltonI found the following packages using
pretty-format:node_modules/jest-matcher-utils/package.json: "pretty-format": "^27.3.1" node_modules/react-native/package.json: "pretty-format": "^26.5.2", node_modules/jest-circus/package.json: "pretty-format": "^27.3.1", node_modules/@typescript-eslint/scope-manager/package.json: "pretty-format": "*", node_modules/@react-native-community/cli/package.json: "pretty-format": "^26.6.2", node_modules/@react-native-community/cli-server-api/package.json: "pretty-format": "^26.6.2", node_modules/jest-leak-detector/package.json: "pretty-format": "^27.3.1" node_modules/jest-snapshot/package.json: "pretty-format": "^27.3.1", node_modules/jest-message-util/package.json: "pretty-format": "^27.3.1", node_modules/jest-validate/package.json: "pretty-format": "^27.3.1" node_modules/jest-each/package.json: "pretty-format": "^27.3.1" node_modules/metro-config/node_modules/jest-validate/package.json: "pretty-format": "^26.6.2" node_modules/metro-config/package.json: "pretty-format": "^26.5.2", node_modules/jest-jasmine2/package.json: "pretty-format": "^27.3.1", node_modules/jest-diff/package.json: "pretty-format": "^27.3.1" node_modules/jest-config/package.json: "pretty-format": "^27.3.1"and these packages using expect:
node_modules/fast-glob/node_modules/glob-parent/package.json: "expect": "^1.20.2", node_modules/glob-parent/package.json: "expect": "^26.0.1", node_modules/jest-circus/package.json: "expect": "^27.3.1", node_modules/jest-jasmine2/package.json: "expect": "^27.3.1", node_modules/jest-snapshot/package.json: "expect": "^27.3.1",Which, consequently uses
ansi-stylesFound it, damn, it was the autocomplete, it imported
import { validate } from 'jest-validate';instead of a local file.@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!
Reacted by Guillaume PiedigrossiI 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-stylesI 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-stylespackage from main.jsbundle:
#14400 (comment)
react/metro#519 (comment)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.jstoBundle React Native code and images.Reacted by Caio Quirino MedeirosThanks @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 ?
Reacted by Hector AyalaHi @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 ]Reacted by Christos BotsikasHey @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?
Reacted by Caio Quirino Medeiros, Guillaume Piedigrossi, Anurak Kingkaew, Bryce Kolton and Muhammad Hassaan@aprilmintacpineda could you help us by sharing your fix please?
Found it, damn, it was the autocomplete, it imported
import { validate } from 'jest-validate';instead of a local file.This was it in my case, I imported the wrong module.
Hello again, for those looking for a temporary fix, I ended up using
patch-packageand have this change done to my dependencies. Now it builds with Hermes!Hopefully, they merge PR chalk/ansi-styles#80 soon so the library works again without this patch.
Reacted by Daniel Arocha and Bryce Koltonresolved 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" }
Reacted by Andreas JacobReacted by Nathan Meibergen and Wojciech BożekHi, there is another solution by @neildhar:
yarn add --dev @babel/plugin-transform-named-capturing-groups-regex
Modify your
babel.config.jslike 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?
Reacted by Glendon Philipp Baculio, Lorenzo Sciandra, Maksym Kudliak, rahmachriaa, Guillaume Piedigrossi, Thomaz Capra, Robson Amorim, Gustavo Coelho, Bruno, Bryce Kolton and 9 moreReacted by Daniel Arocha, Guillaume Piedigrossi, Robson Amorim, Gustavo Coelho, Bruno and Sadjad (Mo) AsadiReacted by rahmachriaa, Guillaume Piedigrossi, Robson Amorim, Gustavo Coelho, feokuma-lambda, Bruno, Bryce Kolton, Mehmet Salih YALDIZ, Andrija Jambrovic and Sadjad (Mo) AsadiReacted by Maksym Kudliak, Robson Amorim, Gustavo Coelho, feokuma-lambda, Bruno, Sadjad (Mo) Asadi and Ben WintersReacted by Christopher , Gustavo Coelho and Sadjad (Mo) AsadiHi, there is another solution by @neildhar:
yarn add --dev @babel/plugin-transform-named-capturing-groups-regex
Modify your
babel.config.jslike 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?
This worked for me
Hi, there is another solution by @neildhar:
yarn add --dev @babel/plugin-transform-named-capturing-groups-regex
Modify your
babel.config.jslike 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
Reacted by feokuma-lambdaHi, there is another solution by @neildhar:
yarn add --dev @babel/plugin-transform-named-capturing-groups-regex
Modify your
babel.config.jslike 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?
I had the same problem when i wanted to build android APK. but it helped me a lot thank you.
I upgraded from 0.67.4 to 0.70.0. I tried this solution as well for android. Din't work for me.
I upgraded to RN 0.70.0 and this doesn't work for me. I also tried to use
core-jsRegExp polyfill, but haven't found success there either.- locked as resolved and limited conversation to collaborators
on Oct 21, 2022
Description
running in ios results to this error:
main.jsbundle Invalid regular expression: Quantifier has nothing to repeatIt's referring to this:
I found that there are 2 packages that has this code:
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 infoSteps to reproduce
build on ios
Snack, code example, screenshot, or link to a repository
No response