Cannot open debug version with mac + safari

[Nancy-Salpepi]

Test device
MacBook Air m1 chip

Operating System
macOS 12.5.1

Browser
Safari 15.6.1

Problem description
For phetsims/qa#831 but also seen in other recent tests (ex. phetsims/qa#830), the debug version doesn't open with safari. An error message appears in the console. It also happens after I build a version on master.

This was reproduced by @samreid as well on 9/1. From slack:

Sam Reid
5 days ago
https://phet-dev.colorado.edu/html/gravity-and-orbits/1.6.0-dev.5/phet/gravity-and-orbits_all_phet_debug.html launched twice for me on Mac/Chrome with no problems.
@Nancy Salpepi
what URL did you see the problem with?

Sam Reid
5 days ago
In Mac/Safari, I get this error:

Sam Reid
5 days ago
Does the debug version contain code that is incompatible with Safari?

Nancy Salpepi
5 days ago
I have no issue with chrome either. The issue is with safari specifically.

Sam Reid
5 days ago
And do we ever give the debug versions to clients, or are they for our team? (edited)

Troubleshooting information: !!!!! DO NOT EDIT !!!!! Name: ‪Ratio and Proportion‬ URL: https://phet-dev.colorado.edu/html/ratio-and-proportion/1.2.0-dev.31/phet/ratio-and-proportion_all_phet.html Version: 1.2.0-dev.31 2022-08-24 16:50:40 UTC Features missing: touch Flags: pixelRatioScaling User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.6.1 Safari/605.1.15 Language: en-US Window: 1322x704 Pixel Ratio: 2/1 WebGL: WebGL 1.0 GLSL: WebGL GLSL ES 1.0 (1.0) Vendor: WebKit (WebKit WebGL) Vertex: attribs: 16 varying: 30 uniform: 1024 Texture: size: 16384 imageUnits: 16 (vertex: 16, combined: 32) Max viewport: 16384x16384 OES_texture_float: true Dependencies JSON: {}

[samreid]

@zepumph and I built a local version with grunt --brands=phet --minify.minify=false and observed this stack trace when running:

http://localhost/main/ratio-and-proportion/build/phet/ratio-and-proportion_all_phet_debug.html

We also observed that for the local and published versions, the sim launched with no problems when the JS console was open, and failed with that error when the JS console was closed. Keyword: heisenbug

UPDATE:

@zepumph and I tested further, and have narrowed it down like this:

When you have a public static IOType in classes like NumberProperty or Utterance that loads IOType from an import, Webpack outputs code that works in Safari if and only if the Safari dev tools are open. We still don't know why.

[samreid]

We are in uncharted waters. The google search "cannot access uninitialized variable" "webpack" safari has only 4 results. We know it is a webpack problem because thing work in unbuilt mode with public static class attributes. Running transpile even for the debug versions "patches" the problem though (or makes it so webpack is OK with it), but does make the debug code a bit uglier (combines statements onto single lines).

Our paths forward:

• Remove all usages of public static class attributes. There are many! We don't want to do that.
• Transpile the phet brand, even when minify is on. But this puts several statements on one line. And feels like a workaround since we still don't know why webpack causes issues.
• Report this as a bug to webpack, and document this as a known issue for our team and users, that "if you are running the debug version in phet brand in safari, you will need the dev tools open".

Also, phet-io's debug version always runs babel transpilation step and does not exhibit these bugs.

Let's touch base at dev meeting. We can escalate to status meeting if necessary (hopefully not).

[zepumph]

I also want to add that we updated to webpack 5.74 and the problem still persisted.

[jonathanolson]

Dev meeting: we'll add minimal transpilation, AND notify webpack.

[zepumph]

@samreid will you please pull all and confirm this is fixed to unblock this issue?

[samreid]

I pulled, inspected the commit, built with grunt --brands=phet and tested locally at http://localhost/main/ratio-and-proportion/build/phet/ratio-and-proportion_all_phet_debug.html in Safari with "Empty Caches" and no dev tools open. It launched and ran well. If that all sounds good, perhaps this issue can be closed.

[zepumph]

Yes that seems right to me, if I felt like I was <1 hour to a simple, reproducible case to give to webpack, then I think it would be worth it, but this workaround seems more than reasonable given our current priorities and schedule. Closing

[samreid]

Noting that Safari 16 was released today. I tested https://phet-dev.colorado.edu/html/ratio-and-proportion/1.2.0-dev.31/phet/ratio-and-proportion_all_phet_debug.html with dev tools closed and cache empty, and it worked OK on safari Version 16.0 (17614.1.25.9.10, 17614).

@zepumph should we change anything?

[zepumph]

If that is the case, I think we should revert the commit. I did so above. Can you please pull and build locally and confirm things still have the behavior you expect?

[samreid]

I made a fresh build of RAP and tested with empty cache and dev tools closed on Safari Version 16.0 (17614.1.25.9.10, 17614), and it worked OK. Closing.