'SyntaxError: No identifiers allowed directly after numeric literal' in Safari #10621

maggie44 · 2021-12-20T22:39:18Z

Preflight Checklist

I have completed all Troubleshooting Steps.
I'm on the latest version of Directus.
There's no other issue that already describes my problem.

Describe the Bug

I am running Directus 9.3 and accessing it using Safari (15.2). It has been working fine, but now for a second time when I access the admin panel I just see nothing at all except white. In the console there is the following message and nothing else:

SyntaxError: No identifiers allowed directly after numeric literal

In the tab at the top of the Safari page it is stuck on Loading....

There are no errors reported in the console of the running Directus instance other than a received and successful request:

22:36:00 ✨ request completed GET 200 /admin 4ms

I have tried clearing cookies, disabling all ad blockers, and still no joy. I have also tried in a Private Window on Safari and getting the same error. The API responses still work as expected. And when accessing the same URL from Firefox, it is working fine.

Directus is running on a VPS and accessed over the internet, using https. It is behind an NGINX instance acting as a reverse proxy:

    location / {
          resolver 127.0.0.11 valid=30s;
          set $directus http://directus:8055;
          proxy_pass $directus;
          proxy_http_version 1.1;
          proxy_set_header X-Forwarded-Host $host;
          proxy_set_header X-Forwarded-Server $host;
          proxy_set_header X-Real-IP $remote_addr;
          proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
          proxy_set_header X-Forwarded-Proto $scheme;
          proxy_set_header Host $http_host;
          proxy_set_header Upgrade $http_upgrade;
          proxy_set_header Connection "Upgrade";
          proxy_pass_request_headers on;
      }

To Reproduce

I am not sure what causes the issue so haven't been able to reproduce it. It is the second time I has occurred over the course of about 8 hours of work over 2 days.

Wish I could provide more details but there isn't anything else in the console.

Errors Shown

In the tab at the top of the Safari page it is stuck on Loading....

What version of Directus are you using?

9.3

What version of Node.js are you using?

v16.13.1

What database are you using?

Postgres

What browser are you using?

Safari

What operating system are you using?

Mac OS

How are you deploying Directus?

Docker

The text was updated successfully, but these errors were encountered:

rijkvanzanten · 2021-12-20T22:48:23Z

@Maggie0002 Could you try it with all extensions disabled and in an incognito window?

That error indicates that there's a syntax error in some JavaScript that's being ran. The JS bundle of the app doesn't change when you refresh the page; and if it was a problem in the Directus bundle, I would've expected it to show up every time you load the page, rather than sporadically.

maggie44 · 2021-12-20T23:06:47Z

I have also tried in a Private Window on Safari

'Private Window' is Safari's equivalent of 'Incognito'.

I tried quitting out of Safari and going back in (by quitting, I mean instead of closing all the windows and tabs, I right clicked the Safari app and quit the whole app and restarted it). Still the same issue, although that time it worked in the Private Window. I then cleared the cookies again, quit Safari and opened it again. Then was able to access it. Seemed to be a similar process I had to go through last time to clear the issue. I suspect it will come again and will try and hone the steps more.

Just to confirm, it definitely didn't work in the Private Window before. When it reoccurs I will provide a screenshot of that too.

rijkvanzanten · 2021-12-20T23:52:36Z

Do you have any custom Directus (app) extensions? 🤔

rijkvanzanten · 2021-12-20T23:54:15Z

The strange thing to me is that Safari doesn't mention any stack trace. If there's bugs in the directus code, you'd normally find a "vendor.107cvgx.js" or something on the right hand side 🤔

maggie44 · 2021-12-21T00:08:58Z

Do you have any custom Directus (app) extensions? 🤔

Nope, no custom extensions.

Here it is again, just reoccurred after closing all the windows with Command+Q, reopening and then going to the url again. Here is the Private Browser screenshot:

I definitely haven't ruled out this being something Safari related, but as I haven't seen this anywhere else presumably a Safari bug + something about the Directus environment.

rijkvanzanten · 2021-12-21T00:11:46Z

Just out of curiosity, what's this and what does it do?

For what it's worth, I use Safari as my daily driver (15.2 on macOS Monterey 12.1 currently), and haven't seen this before 🤔

maggie44 · 2021-12-21T00:13:20Z

Just out of curiosity, what's this and what does it do?

For what it's worth, I use Safari as my daily driver (15.2 on macOS Monterey 12.1 currently), and haven't seen this before 🤔

It's AdGuard, and the logo indicates it's paused for this website (i.e. turned off for this website).

There is some source code returned. Not seeing it as super helpful, but I'm clutching at straws here to provide something useful.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <base href="/admin/"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=1, viewport-fit=cover"/>
    <meta name="format-detection" content="telephone=no,date=no,address=no,email=no,url=no"/>
    <meta name="HandheldFriendly" content="true"/>
    <meta name="MobileOptimized" content="width"/>
    <meta name="msapplication-TileColor" content="#263238"/>
    <meta name="theme-color" content="#263238"/>
    <meta name="mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="default"/>
    <link rel="manifest" href="manifest.webmanifest"/>
    <link rel="mask-icon" href="img/icons/safari-pinned-tab.svg" color="#263238"/>
    <link rel="icon" type="image/png" sizes="512x512" href="img/icons/android-chrome-512x512.png"/>
    <link rel="icon" type="image/png" sizes="192x192" href="img/icons/android-chrome-192x192.png"/>
    <link rel="apple-touch-icon" href="img/icons/apple-touch-icon.png"/>
    <link rel="apple-touch-icon" sizes="152x152" href="img/icons/apple-touch-icon-152x152.png"/>
    <link rel="apple-touch-startup-image" href="img/splashscreens/apple-splash-2048-2732.jpg" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"/>
    <link rel="apple-touch-startup-image" href="img/splashscreens/apple-splash-2732-2048.jpg" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"/>
    <link rel="apple-touch-startup-image" href="img/splashscreens/apple-splash-1668-2388.jpg" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"/>
    <link rel="apple-touch-startup-image" href="img/splashscreens/apple-splash-2388-1668.jpg" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"/>
    <link rel="apple-touch-startup-image" href="img/splashscreens/apple-splash-1536-2048.jpg" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"/>
    <link rel="apple-touch-startup-image" href="img/splashscreens/apple-splash-2048-1536.jpg" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"/>
    <link rel="apple-touch-startup-image" href="img/splashscreens/apple-splash-1668-2224.jpg" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"/>
    <link rel="apple-touch-startup-image" href="img/splashscreens/apple-splash-2224-1668.jpg" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"/>
    <link rel="apple-touch-startup-image" href="img/splashscreens/apple-splash-1620-2160.jpg" media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"/>
    <link rel="apple-touch-startup-image" href="img/splashscreens/apple-splash-2160-1620.jpg" media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"/>
    <link rel="apple-touch-startup-image" href="img/splashscreens/apple-splash-1242-2688.jpg" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"/>
    <link rel="apple-touch-startup-image" href="img/splashscreens/apple-splash-2688-1242.jpg" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"/>
    <link rel="apple-touch-startup-image" href="img/splashscreens/apple-splash-1125-2436.jpg" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"/>
    <link rel="apple-touch-startup-image" href="img/splashscreens/apple-splash-2436-1125.jpg" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"/>
    <link rel="apple-touch-startup-image" href="img/splashscreens/apple-splash-828-1792.jpg" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"/>
    <link rel="apple-touch-startup-image" href="img/splashscreens/apple-splash-1792-828.jpg" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"/>
    <link rel="apple-touch-startup-image" href="img/splashscreens/apple-splash-1242-2208.jpg" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"/>
    <link rel="apple-touch-startup-image" href="img/splashscreens/apple-splash-2208-1242.jpg" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"/>
    <link rel="apple-touch-startup-image" href="img/splashscreens/apple-splash-750-1334.jpg" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"/>
    <link rel="apple-touch-startup-image" href="img/splashscreens/apple-splash-1334-750.jpg" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"/>
    <link rel="apple-touch-startup-image" href="img/splashscreens/apple-splash-640-1136.jpg" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"/>
    <link rel="apple-touch-startup-image" href="img/splashscreens/apple-splash-1136-640.jpg" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"/>
    <title>Loading&hellip;</title>
    <style id="custom-css"></style>
    <script type="module" crossorigin src="index.10616d79.js"></script>
    <link rel="modulepreload" href="assets/vendor.764dd834.js">
    <link rel="modulepreload" href="assets/use-sync.03a52ddb.js">
    <link rel="stylesheet" href="assets/vendor.fe7856f0.css">
    <link rel="stylesheet" href="assets/index.a35643ef.css">
</head>
<body class="light">
    <noscript>
        <strong>We're sorry but Directus doesn't work without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <div id="dialog-outlet"></div>
    <div id="menu-outlet"></div>
    <script defer src="https://static.cloudflareinsights.com/beacon.min.js/v652eace1692a40cfa3763df669d7439c1639079717194" integrity="sha512-Gi7xpJR8tSkrpF7aordPZQlW2DLtzUlZcumS8dMQjwDHEnw9I7ZLyiOj/6tZStRBGtGgN6ceN6cMH8z7etPGlw==" data-cf-beacon='{"rayId":"6c0ce2b76aabf427","version":"2021.12.0","r":1,"token":"d1ed37ed1f8544788b95689cab6d75d6","si":100}' crossorigin="anonymous"></script>
</body>
</html>

It is proxied by CloudFlare, and tried purging the CloudFlare cache. Have no particular reason to believe it's relevant, just trying to note any particular unique elements of the environment.

Same thing to get it back working again. Quit Safari, open it up. First attempt in a normal browser, no luck. Attempt in the Private Window now works. Close them all down, open up the normal window, not it loads.

Real mystery.

rijkvanzanten · 2021-12-21T05:10:49Z

Does cloudflare have any asset transformation magic? Something must be altering the JavaScript that's ran, but no clue what that something could be at this point..

maggie44 · 2021-12-28T18:01:02Z

Does cloudflare have any asset transformation magic? Something must be altering the JavaScript that's ran, but no clue what that something could be at this point..

Not that I am aware of, other than some compression of static JS. Strange that it is an intermittent issue, and only Safari (Firefox shows no problem on the same Cloudflare proxy). My money is on something in Directus triggering a bug in Safari but no worldly idea how to debug it. I will try and investigate further, and will also keep an eye out for the next Safari release to test on.

rijkvanzanten · 2022-01-24T23:52:43Z

@Maggie0002 See #10826 (comment). Seems like disabling Auto Minify and purging the cloudflare caches should help in this scenario 👍🏻

Fell-x27 · 2023-09-04T13:38:16Z

@Maggie0002 See #10826 (comment). Seems like disabling Auto Minify and purging the cloudflare caches should help in this scenario 👍🏻

But do you know what causes it? Safari doesn't understand the JS native BigInt format. If there is a number like "123n" encountered, Safari treats it as a variable with an incorrect name.

CF probably appends "n" to some integers to protect calculations from overflowing and...here we are!

ricricucit · 2023-11-07T10:24:41Z

Also getting this, which kills sessions and logs out users, with Auth0 (with or without standard login enabled).

✅ removing Auto Minify of JS solved it.

Thanks @rijkvanzanten for the hint and @Fell-x27 for the insights! 🤗

maggie44 added the Bug (Potential) label Dec 20, 2021

rijkvanzanten added Needs More Info and removed Bug (Potential) labels Dec 20, 2021

rijkvanzanten mentioned this issue Jan 3, 2022

Chrome, Syntax error. #10826

Closed

3 tasks

rijkvanzanten closed this as completed Jan 24, 2022

rijkvanzanten added Question and removed Needs More Info labels Jan 24, 2022

github-actions bot locked as resolved and limited conversation to collaborators Jan 31, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

'SyntaxError: No identifiers allowed directly after numeric literal' in Safari #10621

'SyntaxError: No identifiers allowed directly after numeric literal' in Safari #10621

maggie44 commented Dec 20, 2021 •

edited

rijkvanzanten commented Dec 20, 2021

maggie44 commented Dec 20, 2021 •

edited

rijkvanzanten commented Dec 20, 2021

rijkvanzanten commented Dec 20, 2021

maggie44 commented Dec 21, 2021 •

edited

rijkvanzanten commented Dec 21, 2021

maggie44 commented Dec 21, 2021 •

edited

rijkvanzanten commented Dec 21, 2021

maggie44 commented Dec 28, 2021 •

edited

rijkvanzanten commented Jan 24, 2022

Fell-x27 commented Sep 4, 2023 •

edited

ricricucit commented Nov 7, 2023

'SyntaxError: No identifiers allowed directly after numeric literal' in Safari #10621

'SyntaxError: No identifiers allowed directly after numeric literal' in Safari #10621

Comments

maggie44 commented Dec 20, 2021 • edited

Preflight Checklist

Describe the Bug

To Reproduce

Errors Shown

What version of Directus are you using?

What version of Node.js are you using?

What database are you using?

What browser are you using?

What operating system are you using?

How are you deploying Directus?

rijkvanzanten commented Dec 20, 2021

maggie44 commented Dec 20, 2021 • edited

rijkvanzanten commented Dec 20, 2021

rijkvanzanten commented Dec 20, 2021

maggie44 commented Dec 21, 2021 • edited

rijkvanzanten commented Dec 21, 2021

maggie44 commented Dec 21, 2021 • edited

rijkvanzanten commented Dec 21, 2021

maggie44 commented Dec 28, 2021 • edited

rijkvanzanten commented Jan 24, 2022

Fell-x27 commented Sep 4, 2023 • edited

ricricucit commented Nov 7, 2023

maggie44 commented Dec 20, 2021 •

edited

maggie44 commented Dec 20, 2021 •

edited

maggie44 commented Dec 21, 2021 •

edited

maggie44 commented Dec 21, 2021 •

edited

maggie44 commented Dec 28, 2021 •

edited

Fell-x27 commented Sep 4, 2023 •

edited