Invalid regular expression: Quantifier has nothing to repeat

[dimaportenko]

Describe the bug

When I'm making ios production build I'm getting following error

▸ Running script 'Bundle React Native code and images'
    the transform cache was reset.

❌  /Users/dmytro/Library/Developer/Xcode/DerivedData/MyApp-frkpgjecadzmdafacduzaolbaukr/Build/Intermediates.noindex/ArchiveIntermediates/MyApp/BuildProductsPath/Release-iphoneos/main.jsbundle:71967:25: Invalid regular expression: Quantifier has nothing to repeat

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

which is points to the testing-library, see attached screenshot

Screenshots

Versions

npmPackages:
    @testing-library/react-native: 9.1.0 => 9.1.0 
    react: 17.0.2 => 17.0.2 
    react-native: 0.67.3 => 0.67.3 
    react-test-renderer: 17.0.2 => 17.0.2

[dimaportenko]

Explained by @satya164 on Reddit

The app contains what you import. Doesn't matter if it's in dependencies, devDependencies or you just created a file. Those fields are to tell npm/Yarn about what to install. Bundling looks only at your imports.

If your bundle contains code from testing library`, then you're importing it into some file that's imported by your entry point.

Looking it at it again, the error is coming from ansi-styles package, not @testing-library. So you're importing something that's importing it. Code doesn't get bundled just by installing.

You can check which packages depend on ansi-styles with yarn why ansi-styles/npm ls ansi-styles and then see what you're importing.

[AugustinLF]

Why is your ios production build even bundling code from @testing-library/react-native? As pointed out in the comment you linked, somewhere in your app your importing something that you shouldn't. Importing and bundling the library as part of an app is definitely not supported by us.

I'll close the issue meanwhile since you as you raised it, the issue is on your side, but feel free to raise any problem/concern you might have.

[dimaportenko]

Sure @AugustinLF, I don't think you should deal with it. I hope you've already seen this problem and can give some advice.

Just want to share the information I have, in case somebody else will face the same issue.

For this project, we are using monorepo. This is my first experience with yarn workspaces, but my guess is it's somehow related. I have nohoist settings like

    "nohoist": [
      "**/react",
      "**/react-dom",
      "**/react-native",
      "**/react-native/**"
    ]

So this pattern, unfortunately, overlaps with @testing-library/react-native. I'll post here if I have a proper solution.

[sparga]

I have been seeing the same error. The build error happens when using Hermes because the ansi-styles package uses named capture groups for regex which are not supported on this JS engine.

Weirdly, I also noticed that @testing-library/react-native is imported in my bundle even if I don't import it explicitly. I haven't been able to reproduce with the Example projects in this repo so I suspect it's something with my configuration as well. It seems that any library containing /react-native is imported anyway.

In case it helps others, I have been able to work around this issue by using an alias when installing the library with Yarn:

yarn add react-native-testing-library@npm:@testing-library/react-native

And then, I use react-native-testing-library to import the library in my test files. It's not great but it works 🤷‍♂️.

[pasquale95]

For whoever experiencing such problem, I solved by adding:

plugins: [
    '@babel/plugin-transform-named-capturing-groups-regex',
  ],

in babel.config.js.

[mdjastrzebski]

@pasquale95 make sure that you add RNTL as dev dependency instead of regular one. RNTL should not be bundled with your app build!

[dimaportenko]

@mdjastrzebski check #955 (comment) It doesn't matter if it is dev or regular dependencies.