Search code examples
reactjssafaridraftjs

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.


Solution

  • 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).