search

expo / vscode-expo

Expo Tools keep you productive with debugging, IntelliSense, and prebuild previews
https://marketplace.visualstudio.com/items?itemName=expo.vscode-expo-tools
MIT License
413 stars 11 forks source link

Doesn't work for projects built with Expo SDK 50 #240

Closed RohanSensei closed 6 months ago

RohanSensei commented 7 months ago

Description of the bug

Doesn't work for projects built with Expo SDK 50, always stuck at 'waiting for device to connect...'"

To Reproduce

  1. create a new project: "npx create-expo-app@latest --template tabs@50"
  2. run "npx expo start" in vscode terminal, press i or a to start app in IOS or Android
  3. run the Debug command, Expo: Debug ...
  4. the dialog pop out

Expected behavior

dialog box disappear and you can debug in debug console in vscode.

Actual behavior

always stuck at 'waiting for device to connect...'"

Additional context

It works fine with lower expo sdk version projects.

EzioLi01 commented 7 months ago

Cannot get any ws target info from bundler url from expo50.

jbains90 commented 7 months ago

Also experiencing the same issue. In fact the "Debug Remote JS" option has disappeared completely in Expo Go, it was there in SDK 49.

byCedric commented 7 months ago

Hi all! We had an issue in Expo Go, which we fixed 4 days ago, and released 1-2 days ago (pending store review). If you use a simulator or emulator, make sure you are using the latest Expo Go version (2.30.9 for both Android and iOS).

If that doesn't work, do let me know!

ArnieGA commented 7 months ago

I'm also unable to use the extension on my end. The only action I see is a progress-bar-like graphic show and then hide, at the top of VS Code's Run and Debug tab. I'm using Debug: Debug Expo app on a device or simulator, using Hermes to start the process.

If it helps, here's information about my specific scenario/environment...

VS Code

Version: 1.86.0 (system setup)
Commit: 05047486b6df5eb8d44b2ecd70ea3bdf775fd937
Date: 2024-01-31T10:28:19.990Z
Electron: 27.2.3
ElectronBuildId: 26495564
Chromium: 118.0.5993.159
Node.js: 18.17.1
V8: 11.8.172.18-electron.0
OS: Windows_NT x64 10.0.19045

System installed Node.js: 20.11.0 (NVM managed)

Expo

orenagiv commented 7 months ago

Hey, Same here...

Any news about this one?

It seems as-if it ignores the bundlerPort in my launch.json and attempts to use port 9229.

My launch.json:

{
    "configurations": [
        {
            "type": "expo",
            "request": "attach",
            "name": "Debug Expo app",
            "projectRoot": "${workspaceFolder}",
            "bundlerPort": "8081",
            "bundlerHost": "127.0.0.1"
        }
    ]
}

So I tried to run expo over port 9229:

npx expo start --port 9229

And then the VSCode Expo Tools managed to attach. However, it didn't bind to ant breakpoints and expo crashed.

Diazole commented 7 months ago

@ArnieGA @orenagiv The extension appears to be broken on VS Code 1.86.x.

Downgrading VS code to 1.85.x as a temporary workaround will resolve the 9229 port issue.

@byCedric Do you mind having a look into this?

nicolasWD commented 7 months ago

Same here, I have a project with Expo SDK 49, my VS Code is v.1.86.1 and Expo Go v.2.30.9

I have tried the command Expo: Debug, and nothing appears on the screen except the "Inspect Expo App" in Call Stack under the Run and Debug section, it appears for 5 seconds and then disappears.

I've tried using the port 9229 as with the users above and I get the same behavior.

Would love to see a solution to this!

sebastianrueckerai commented 6 months ago

Same here, after two days of experimenting none of the documented ways of debugging seem to work with the latest SDK version!

stefankaetker commented 6 months ago

And same here with the above launch.json from orenagiv and expo 49, VS. Code 1.86.0 and Expo Go v2.30.9. I am launching the App on Expo Go on my iPhone with iOS 17.3.1.

sebastianrueckerai commented 6 months ago

I opened this related issue and provided a repo with my minimal example: https://github.com/expo/expo/issues/27157#issuecomment-1952506111

DeabitTech commented 6 months ago

guys this is a big issue, i'm still have this issue. like your cases i did the upgrade from previous version of expo (45 in my case) to the 50, and i fixed a lot of issues in the meanwhile, but this about the Assets still here. in my case this is the first error i encontering when i launch the run:ios: node_modules/@expo-google-fonts/nunito/Nunito_500Medium.ttf: Assets must have hashed files. Ensure the expo-asset plugin is installed.

but if i commenting the part of my code about the fonts, i have the same issues but on expo-vectors.

please fix it @expo-bot

0xAskar commented 6 months ago

I also want to add that... after fixing many bugs and module problems after upgrading to expo 50, the app is completely blank with no error. There is completely no error, and its impossible to use the app

image
rsapko commented 6 months ago

I've installed the Expo Tools extension in VSCODE. I can't find the "Exp: Debug ... command anywhere. What am I missing? Working on a MAC. I'm wanting to debug with breakpoints in VSCODE.

nicolasWD commented 6 months ago

I've installed the Expo Tools extension in VSCODE. I can't find the "Exp: Debug ... command anywhere. What am I missing? Working on a MAC. I'm wanting to debug with breakpoints in VSCODE.

@rsapko You need to press F1 and search for it in the dropdown box

rsapko commented 6 months ago

I've installed the Expo Tools extension in VSCODE. I can't find the "Exp: Debug ... command anywhere. What am I missing? Working on a MAC. I'm wanting to debug with breakpoints in VSCODE.

@rsapko You need to press F1 and search for it in the dropdown box

Yes. or Shit + Command + P, but it's not there.

nicolasWD commented 6 months ago

I don't know, the problem for me it seems that the extension is not attaching to the packager and thus, cannot debug any breakpoints either on MAC or PC (I work on both)

rsapko commented 6 months ago

I don't know, the problem for me it seems that the extension is not attaching to the packager and thus, cannot debug any breakpoints either on MAC or PC (I work on both)

Have you been able to find a setup that works with breakpoints in VSCODE? Attaching to Hermes works somewhat, but the source maps seem off and the 'watch' and 'variables' are inconsistent. Can you share a launch.json if you have it working?

nicolasWD commented 6 months ago

I don't know, the problem for me it seems that the extension is not attaching to the packager and thus, cannot debug any breakpoints either on MAC or PC (I work on both)

Have you been able to find a setup that works with breakpoints in VSCODE? Attaching to Hermes works somewhat, but the source maps seem off and the 'watch' and 'variables' are inconsistent. Can you share a launch.json if you have it working?

@rsapko I have the React Native Tools extension and it seems that it is currently working for me. I wanted to try out Expo Tools because it is actually faster than the other one, but it's not working for me either right now.

rsapko commented 6 months ago

I don't know, the problem for me it seems that the extension is not attaching to the packager and thus, cannot debug any breakpoints either on MAC or PC (I work on both)

Have you been able to find a setup that works with breakpoints in VSCODE? Attaching to Hermes works somewhat, but the source maps seem off and the 'watch' and 'variables' are inconsistent. Can you share a launch.json if you have it working?

@rsapko I have the React Native Tools extension and it seems that it is currently working for me. I wanted to try out Expo Tools because it is actually faster than the other one, but it's not working for me either right now.

@nicolasWD I have the React Native Tools Extension also. I've tried to get that to work too. Would you mind sharing your launch.json file with me. I need the configuration that works and I've tried everything.

alexwolf22 commented 6 months ago

Hi I'm having the same issue.

i can't connect my debugger in vs code or the breakpoints set in the chrome dev tools javascript inspector. The only way to get to code to stop is by using hardcoded debugger; statements.

I'm using expo sdk 50.0.8.

Have latest version of vscode and expo tools vs code plugin installed.

The hermes expo docs says

Test debugging availability by running the command: curl http://127.0.0.1:8081/json/list (adjust the 127.0.0.1:8081 to match your dev server URL). The HTTP response should be an array, as shown below. If it is an empty response, add either the --localhost or --tunnel flag to the npx expo start command.

I'm successfully getting an output here, so unsure what the issue is.

❯ curl http://127.0.0.1:8081/json/list
[
  {
    "id": "701e6363c14647968f3e69a5c3f0af5afe77b995-16",
    "description": "com.scratchodds.app",
    "title": "Hermes React Native",
    "faviconUrl": "https://reactjs.org/favicon.ico",
    "devtoolsFrontendUrl": "devtools://devtools/bundled/js_app.html?experiments=true&v8only=true&ws=192.168.1.77%3A8081%2Finspector%2Fdebug%3Fdevice%3D701e6363c14647968f3e69a5c3f0af5afe77b995%26page%3D16",
    "type": "node",
    "webSocketDebuggerUrl": "ws://192.168.1.77:8081/inspector/debug?device=701e6363c14647968f3e69a5c3f0af5afe77b995&page=16",
    "vm": "Hermes",
    "deviceName": "iPhone SE (3rd generation)"
  },
  {
    "id": "701e6363c14647968f3e69a5c3f0af5afe77b995--1",
    "description": "com.scratchodds.app",
    "title": "React Native Experimental (Improved Chrome Reloads)",
    "faviconUrl": "https://reactjs.org/favicon.ico",
    "devtoolsFrontendUrl": "devtools://devtools/bundled/js_app.html?experiments=true&v8only=true&ws=192.168.1.77%3A8081%2Finspector%2Fdebug%3Fdevice%3D701e6363c14647968f3e69a5c3f0af5afe77b995%26page%3D-1",
    "type": "node",
    "webSocketDebuggerUrl": "ws://192.168.1.77:8081/inspector/debug?device=701e6363c14647968f3e69a5c3f0af5afe77b995&page=-1",
    "vm": "don't use",
    "deviceName": "iPhone SE (3rd generation)"
  }
]

has anyone found a workaround? This a is a new react native project, and my productivity not using an IDE debugger is significantly lower.

nicolasWD commented 6 months ago

I don't know, the problem for me it seems that the extension is not attaching to the packager and thus, cannot debug any breakpoints either on MAC or PC (I work on both)

Have you been able to find a setup that works with breakpoints in VSCODE? Attaching to Hermes works somewhat, but the source maps seem off and the 'watch' and 'variables' are inconsistent. Can you share a launch.json if you have it working?

@rsapko I have the React Native Tools extension and it seems that it is currently working for me. I wanted to try out Expo Tools because it is actually faster than the other one, but it's not working for me either right now.

@nicolasWD I have the React Native Tools Extension also. I've tried to get that to work too. Would you mind sharing your launch.json file with me. I need the configuration that works and I've tried everything.

Hi, sorry for the late reply

this is the object I have in my launch.json (1st entry is for React Native Tools and last for the Expo Tools extensions:

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Exponent Hermes - Experimental",
      "request": "launch",
      "type": "reactnativedirect",
      "cwd": "${workspaceFolder}",
      "platform": "exponent",
      "expoHostType": "lan"
    },
    {
      "name": "Debug in Exponent",
      "request": "launch",
      "type": "reactnative",
      "cwd": "${workspaceFolder}",
      "platform": "exponent",
      "expoHostType": "lan"
    },
    {
      "name": "Debug Android",
      "cwd": "${workspaceFolder}",
      "type": "reactnative",
      "request": "launch",
      "platform": "android"
    },
    {
      "type": "expo",
      "request": "attach",
      "name": "Debug Expo app",
      "projectRoot": "${workspaceFolder}",
      "bundlerPort": "19000",
      "bundlerHost": "192.168.10.2"
    }
  ]
}
alexwolf22 commented 6 months ago

HI I've been able to get vs code debugger work for my dev client build on my simulator using.

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug React Native App",
      "request": "attach",
      "type": "reactnativedirect",
      "cwd": "${workspaceFolder}",
      "sourceMaps": true
    }
  ]
}

Posted abotu it in reaact native tools lib here and got the solution.

Expo tools debugger still is not working, but using react native tools works.

rsapko commented 6 months ago

HI I've been able to get vs code debugger work for my dev client build on my simulator using.

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug React Native App",
      "request": "attach",
      "type": "reactnativedirect",
      "cwd": "${workspaceFolder}",
      "sourceMaps": true
    }
  ]
}

Posted abotu it in reaact native tools lib here and got the solution.

Expo tools debugger still is not working, but using react native tools works.

@alexwolf22 With Expo 50?

rsapko commented 6 months ago

@alexwolf22 Ah, I see...dev client build. I haven't switched from Expo Go yet. I think it's time. I'll have to figure that out now too.

mccoyg commented 6 months ago

I am working with the default stickersmash repo just to see if it works in general, not in my projects anymore after weeks of trying to get this working.

ShimHyesu commented 6 months ago

I have same problem. Expo SDK 49, VS Code v.1.87.0 and Expo Go v.2.29.6

byCedric commented 6 months ago

Hi all! Sorry for the inactivity here. We've published a new version, 1.3.0, which should reinstate the debugging capabilities. It was caused by a change in vscode, and was affected by a bug that was fixed in vscode 1.86.0. See PR #245 for more info.

As a follow-up, we updated all our test fixtures to also ensure SDK 50 (and future SDK versions) are working as intended. And we will expand the existing tests, where possible.

I'll keep this issue open for now, but with 1.3.0, you should be able to debug through vscode again.

Note that if vscode still gives you problems, you can also use the built-in Chrome DevTools. You can open this by pressing j in the terminal, after running expo start. The infrastructure behind this and vscode debugging are identical. But, there are some differences in how it works through vscode versus Chrome DevTools.

rsapko commented 6 months ago

Hi all! Sorry for the inactivity here. We've published a new version, 1.3.0, which should reinstate the debugging capabilities. It was caused by a change in vscode, and was affected by a bug that was fixed in vscode 1.86.0. See PR #245 for more info.

As a follow-up, we updated all our test fixtures to also ensure SDK 50 (and future SDK versions) are working as intended. And we will expand the existing tests, where possible.

I'll keep this issue open for now, but with 1.3.0, you should be able to debug through vscode again.

Note that if vscode still gives you problems, you can also use the built-in Chrome DevTools. You can open this by pressing j in the terminal, after running expo start. The infrastructure behind this and vscode debugging are identical. But, there are some differences in how it works through vscode versus Chrome DevTools.

@byCedric The setup instructions are a little vague. Can you give a sample launch.json or better instructions on how to set up the launch.json. Classic application? Application in direct mode(Hermes)? What configuration should we use? using it wit Dev Build? Expo Go?

byCedric commented 6 months ago

@rsapko Of course. Keep in mind that Expo Tools only supports debugging through Hermes, not through the "classic application" methods React Native Tools provides.

In short:

An example .vscode/launch.json would look something like:

{
  "configurations": [
    // Default settings generated from "Expo: Debug app on device or emulator"
    {
      "type": "expo",
      "request": "attach",
      "name": "Debug Expo app",
      "projectRoot": "${workspaceFolder}",
      "bundlerPort": "8081",
      "bundlerHost": "127.0.0.1"
    },
    // Slightly customized version
    {
      "type": "expo",
      "request": "attach",
      // Slightly different name
      "name": "Debug my-app",
      // When using monorepos OR workspaces that's not the root of your Expo app,
      // you have to specify the expo project path. It will ask too if it cant find it.
      "projectRoot": "${workspaceFolder}/apps/my-app",
      // These can be modified however you want
      "bundlerPort": "8081",
      // localhost or your LAN address should also work fine
      "bundlerHost": "127.0.0.1",
      // Enable trace logs to debug the debugger :) (it contains the CDP communications between vscode and the app)
      "trace": true,
      // You can disable something called "turbo source maps", it's a semi-experimental feature from vscode
      // and should only be disabled if you are running into source maps or breakpoint binding issues
      "enableTurboSourcemaps": false,
    }
  ]
}

Hope this helps!

rsapko commented 6 months ago

@byCedric Thank you. I'll give it a try.

ArnieGA commented 6 months ago

@byCedric I'm afraid it is still not working on my end.

What happens?

Until the issue is resolved I'm opting out. Thanks!

byCedric commented 6 months ago

@ArnieGA It sounds like you are running into source map issues, which are also preventing the debugger from binding breakpoints. Right now, Hermes doesn't support setting breakpoints by URI, so we have to fall back to source map-based bindings. This will be improved in later React Native versions.

One thing you can check is why breakpoints aren't binding, vscode has a nice tool for that.

image

If you want, you can share a repro with the project, with comments above the breakpoint locations you are trying to bind. If you create a new issue, I'm happy to take a look and see what we can do to improve.

Alternatively, as mentioned before, you can still use the Chrome DevTools which should be slightly better in terms of breakpoint binding. Keep in mind that not everything is bindable, like JSX elements in render functions.

ArnieGA commented 6 months ago

Thank you for clarifying that for me. :)

On Fri, Mar 8, 2024, 12:03 PM Cedric van Putten @.***> wrote:

@ArnieGA https://github.com/ArnieGA It sounds like you are running into source map issues, which are also preventing the debugger from binding breakpoints. Right now, Hermes doesn't support setting breakpoints by URI, so we have to fall back to source map-based bindings. This will be improved in later React Native versions.

If you want, you can share a repro with the project, with comments above the breakpoint locations you are trying to bind. If you create a new issue, I'm happy to take a look and see what we can do to improve.

Alternatively, as mentioned before, you can still use the Chrome DevTools which should be slightly better in terms of breakpoint binding. Keep in mind that not everything is bindable, like JSX elements in render functions.

— Reply to this email directly, view it on GitHub https://github.com/expo/vscode-expo/issues/240#issuecomment-1985958348, or unsubscribe https://github.com/notifications/unsubscribe-auth/ADEPLHPHSFVZN3E6USQBMXTYXHOMPAVCNFSM6AAAAABCDU2KXCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSOBVHE2TQMZUHA . You are receiving this because you were mentioned.Message ID: @.***>

byCedric commented 6 months ago

Hi all! A quick follow-up on this issue:

For now, I'll close (and lock) this issue. If you are having trouble with breakpoints not binding, I'd love to hear about it. As mentioned here, please open a new issue with a repro and the breakpoints you are trying to bind. I'd be more than happy to take a look and see what we can do to improve it.

Also, if I'm unresponsive on GitHub that's because I have 5k+ messages. You can always reach out on Twitter to me: https://twitter.com/cedric_dev.

Hope this helps!