CODEWITHSUNDEEP
reactjssafaridraftjs
lifeisfoo
lifeisfoo

Reputation: 16374

React application on Safari throws SyntaxError: Invalid regular expression: invalid group specifier name

I've just updated some depencencies in a React project using npm install and the updated project works nicely on all browser except Safari.

On Safari it shows a blanks screen and an error in the console:

SyntaxError: Invalid regular expression: invalid group specifier name
file: 2.f80ba52b.chunk.js

I can exclude breaking changes from updated dependencies, otherwise it would have broken on other browsers too. Despite that, I cannot figure out what is causing it.

Upvotes: 3

Views: 3371

Answers (2)

Dan
Dan

Reputation: 103

I just want to add that I spent a week downgrading Babel and other packages to pre-2018 packages, only to realise that my problem was in a helper function within my own code that was to filter for malicious html code. @lifeisfoo mentions to grep for the string '?<!' above in node_modules, but i recommend also grepping the entire project.

fyi, my regex that was breaking Safari was '?<=!'. Which is also an unsupported lookbehind I tested my regex: (?<=![)(.*?)(?=]) in Safaris regex tester https://www.regextester.com/ and the output says 'Lookbehind is not supported in Javascript'

To end, I found Safaris console error message worthless and spread around the 10,000s of lines of the bundle.js, giving the impression that the issue was within the packages/dependancies, which it clearly was not. I spent ages downgrading the packages only to find the same error message appear on a different line of the bundle.js code.

Upvotes: 2

lifeisfoo
lifeisfoo

Reputation: 16374

Even if similar questions exist, and the root cause has been already recognized as the missing Safari support for lookbehind regex, I would like to provide a general way to handle those situations where, as described in the main question, you can not just fix a line of code - for example when the issue is caused by an external library.

How to handle broken external depencencies

In my case, the bug had been introduced with draft-js-utils 1.4.1, so I solved it downgrading to the first know working version (1.4.0). In order to achieve this, I edited the package.json file changing the dependency line from

"draft-js-utils": "^1.4.0"

to

"draft-js-utils": "1.4.0"

TIP: Avoiding the caret range, you can stick it to a specific version.

How to find broken external depencencies

The only way to find out what dependencies have been affected by this bug is to look for the error message in Github/Gitlab search - currently almost 300 public repositories have a related issue opened.

The hardest thing about this bug is that it could be hidden inside transitive dependencies. You might not even know you are using that package.

If you are not lucky enough to spot it using a Github/Gitlab search, you could try with a local search using your IDE or grep. You need to look for the lookbehind symbols ?<!:

grep -r "?<\!" node_modules

Being a last resort, this approach could be either very slow or produce a huge-and-hard-to-read output.

A sad note

It looks like Webkit developers are not going to add lookbehind regex support soon - the issue has been created in July 2017 without receiving attention from them. Moreover, even if the Safari's issue has been recognized and tracked, no polyfill exists to fix it at the build level (e.g. using Babel).

Upvotes: 5

Related Questions