search

microsoft / react-native-macos

A framework for building native macOS apps with React.
https://microsoft.github.io/react-native-windows/
MIT License
3.39k stars 130 forks source link

Web inspector flashing on production/release build when starting the app #2071

Open AdrianFahrbach opened 5 months ago

AdrianFahrbach commented 5 months ago

Environment

react-native -v: v0.72.10
npm ls react-native-macos: v0.72.16
node -v: v18.17.1
npm -v: v9.6.7
yarn --version: not using yarn
xcodebuild -version: Xcode 15.2 Build version 15C500b

Steps to reproduce the bug

  1. Follow the steps in the "Get Started with macOS" docs article, but use this command to install react native with the specific version that I am using: npx react-native@latest init <projectName> --template "react-native@^0.72.10"
  2. Build a release version of your app following the "Publishing to Apple App Store" of the React Native docs.
  3. Go to the folder where your Release app was saved (somewhere at /Users/<you>/Library/Developer/Xcode/DerivedData/<project-name>-<random-string>/Build/Products/Release/).
  4. Open the app in that folder. You will see the web inspector flashing.

Expected Behavior

The web inspector should be hidden in release/production mode.

Actual Behavior

The web inspector is flashing right before the app has loaded.

Reproducible Demo

Here is a video of the problem. I can also provide you with the test project that I was using but it's just the basic setup mentioned above.

https://github.com/microsoft/react-native-macos/assets/45072099/782d1f39-fc35-4fe2-a32c-e3df75e9ded2

Additional context

I didn't test this with other React Native version, expect 0.73 a while ago. I also think that I didn't have this issue when I started with my project (react-native <0.72) I'm not at all sure on that though.

Saadnajmi commented 5 months ago

Heh.. that's new. Do you have one of these options enabled in Safari? image

Saadnajmi commented 5 months ago

If you have access to your JSCRuntime in your app delegate, you may also be able to use the changes in this PR to disable debugging on ship: https://github.com/microsoft/react-native-macos/pull/1957

AdrianFahrbach commented 5 months ago

Heh.. that's new. Do you have one of these options enabled in Safari?

Yes, this is it! 🤦‍♂️ Thank you so much for your fast response. Really appreciate it every time!

Saadnajmi commented 5 months ago

Heh.. that's new. Do you have one of these options enabled in Safari?

Yes, this is it! 🤦‍♂️ Thank you so much for your fast response. Really appreciate it every time!

Im still worried that a user launching a Ship React Native macOS app will see the flicker of the dev inspector every time, if they have this enabled. To confirm, you created a ship / release app with React Native macOS, have one of those options enabled, and see the flicker?

AdrianFahrbach commented 5 months ago

Heh.. that's new. Do you have one of these options enabled in Safari?

Yes, this is it! 🤦‍♂️ Thank you so much for your fast response. Really appreciate it every time!

Im still worried that a user launching a Ship React Native macOS app will see the flicker of the dev inspector every time, if they have this enabled. To confirm, you created a ship / release app with React Native macOS, have one of those options enabled, and see the flicker?

Yes, I had "Automatically Show Web Inspector for JSContexts" enabled. Once I disabled this option, the web inspector didn't appear anymore. No rebuild required. I don't remember enabling that option, but I'm a webdev, so it makes sense that I did.

Saadnajmi commented 5 months ago

@AdrianFahrbach I fear this is still a valid issue then, since for a split second, the JSContext shows up as debuggable instead of being off from the get go. I'll keep this open.