Skip extra commas for getting workspace settings

[rajatkantinandi]

🐛 What is the bug? How can we reproduce it?

I have a monorepo where there is a folder called frontend. In that folder there is a expo managed react-native app. I have setup following debug config in launch.json:

    {
      "name": "Debug in Expo",
      "cwd": "${workspaceFolder}/frontend",
      "type": "reactnativedirect",
      "request": "launch",
      "platform": "exponent"
    }

It is throwing an error when I try to run the "Debug in expo" task from the debugger of VSCode:

An error occurred while launching the application. Unexpected token ']', ..."    },
  ],
  "set"... is not valid JSON (error code 303)

I have no idea why this is not working. It used to work fine when I tried 1-2 months ago. Please let me know how I can fix the config or if there is an issue with the latest version of the extension since it used to work ealier.

Expected behavior

What were you expecting to happen?

Debug output

Debug Console

```text An error occurred while launching the application. Unexpected token ']', ..." }, ], "set"... is not valid JSON (error code 303) ```

React Native output channel

```text [Debug] Begin to activate... [Debug] Extension version: 1.12.3 [Debug] Projects found: 1 [Error] Failed to activate the React Native Tools extension (error code 702) ```

Developer Tools console

```text ERR [Extension Host] An error occurred while launching the application. Unexpected token ']', ..." }, ], "set"... is not valid JSON (error code 303) workbench.desktop.main.js:sourcemap:149 [Extension Host] An error occurred while launching the application. Unexpected token ']', ..." }, ], "set"... is not valid JSON (error code 303) p @ workbench.desktop.main.js:sourcemap:149 $logExtensionHostMessage @ workbench.desktop.main.js:sourcemap:1590 S @ workbench.desktop.main.js:sourcemap:1590 Q @ workbench.desktop.main.js:sourcemap:1590 M @ workbench.desktop.main.js:sourcemap:1590 L @ workbench.desktop.main.js:sourcemap:1590 (anonymous) @ workbench.desktop.main.js:sourcemap:1590 y @ workbench.desktop.main.js:sourcemap:87 fire @ workbench.desktop.main.js:sourcemap:87 fire @ workbench.desktop.main.js:sourcemap:628 x.onmessage @ workbench.desktop.main.js:sourcemap:1662 workbench.desktop.main.js:sourcemap:149 [Extension Host] This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). The promise rejected with the reason: p @ workbench.desktop.main.js:sourcemap:149 $logExtensionHostMessage @ workbench.desktop.main.js:sourcemap:1590 S @ workbench.desktop.main.js:sourcemap:1590 Q @ workbench.desktop.main.js:sourcemap:1590 M @ workbench.desktop.main.js:sourcemap:1590 L @ workbench.desktop.main.js:sourcemap:1590 (anonymous) @ workbench.desktop.main.js:sourcemap:1590 y @ workbench.desktop.main.js:sourcemap:87 fire @ workbench.desktop.main.js:sourcemap:87 fire @ workbench.desktop.main.js:sourcemap:628 x.onmessage @ workbench.desktop.main.js:sourcemap:1662 workbench.desktop.main.js:sourcemap:655 ERR [Extension Host] TypeError: Cannot read properties of undefined (reading 'getPackager') at C. (/Users/rajatkantinandi/.vscode/extensions/msjsdiag.vscode-react-native-1.12.3/dist/rn-extension.js:21:467347) at Generator.next () at /Users/rajatkantinandi/.vscode/extensions/msjsdiag.vscode-react-native-1.12.3/dist/rn-extension.js:21:461973 at new Promise () at n (/Users/rajatkantinandi/.vscode/extensions/msjsdiag.vscode-react-native-1.12.3/dist/rn-extension.js:21:461718) at C.disconnectRequest (/Users/rajatkantinandi/.vscode/extensions/msjsdiag.vscode-react-native-1.12.3/dist/rn-extension.js:21:467104) at C.dispatchRequest (/Users/rajatkantinandi/.vscode/extensions/msjsdiag.vscode-react-native-1.12.3/dist/rn-extension.js:1:5426) at C.dispatchRequest (/Users/rajatkantinandi/.vscode/extensions/msjsdiag.vscode-react-native-1.12.3/dist/rn-extension.js:1:18045) at C.handleMessage (/Users/rajatkantinandi/.vscode/extensions/msjsdiag.vscode-react-native-1.12.3/dist/rn-extension.js:1:22697) at C._handleData (/Users/rajatkantinandi/.vscode/extensions/msjsdiag.vscode-react-native-1.12.3/dist/rn-extension.js:1:24416) at Socket. (/Users/rajatkantinandi/.vscode/extensions/msjsdiag.vscode-react-native-1.12.3/dist/rn-extension.js:1:23015) at Socket.emit (node:events:514:28) at Socket.emit (node:domain:489:12) at addChunk (node:internal/streams/readable:324:12) at readableAddChunk (node:internal/streams/readable:297:9) at Socket.push (node:internal/streams/readable:234:10) at TCP.onStreamRead (node:internal/stream_base_commons:190:23) ```

Environment

Please tell us about your system and your project:

• npx react-native doctor or npx expo doctor if your project is using Expo:

react-native: 0.73.4
expo: 50.0.6
react: 18.2.0
react-native-web: 0.19.6
expo-cli: 0.17.5
eas-cli/7.2.0 
darwin-arm64 
node-v18.17.1
OS: macOS 14.2.1 23C71 arm64
CPU: Apple M1 
GPU: Apple M1 
Memory: 1533MiB / 8192MiB 
Shell: zsh 5.9
Terminal: vscode

• envinfo:

System:
    OS: macOS 14.2.1
    CPU: (8) arm64 Apple M1
    Memory: 90.61 MB / 8.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.17.1 - ~/.nvm/versions/node/v18.17.1/bin/node
    Yarn: 1.22.21 - ~/.nvm/versions/node/v18.17.1/bin/yarn
    npm: 9.6.7 - ~/.nvm/versions/node/v18.17.1/bin/npm
    bun: 1.0.20 - ~/.bun/bin/bun
  Managers:
    Cargo: 1.66.0 - ~/.cargo/bin/cargo
    CocoaPods: 1.15.0 - /opt/homebrew/bin/pod
    Homebrew: 4.2.6 - /opt/homebrew/bin/brew
    pip3: 23.3 - ~/miniconda3/bin/pip3
    RubyGems: 3.0.3.1 - /usr/bin/gem
  Utilities:
    CMake: 3.28.2 - /opt/homebrew/bin/cmake
    Make: 3.81 - /usr/bin/make
    GCC: 15.0.0 - /usr/bin/gcc
    Git: 2.43.0 - /opt/homebrew/bin/git
    Clang: 15.0.0 - /usr/bin/clang
    FFmpeg: 6.1.1 - /opt/homebrew/bin/ffmpeg
    Curl: 8.4.0 - /usr/bin/curl
  Servers:
    Apache: 2.4.56 - /usr/sbin/apachectl
  Virtualization:
    Docker: 25.0.2 - /opt/homebrew/bin/docker
  SDKs:
    iOS SDK:
      Platforms: DriverKit 23.2, iOS 17.2, macOS 14.2, tvOS 17.2, visionOS 1.0, watchOS 10.2
  IDEs:
    Android Studio: 2021.2 AI-212.5712.43.2112.8512546
    VSCode: 1.86.2 - /usr/local/bin/code
    Vim: 9.0 - /usr/bin/vim
    Xcode: 15.2/15C500b - /usr/bin/xcodebuild
  Languages:
    Bash: 3.2.57 - /bin/bash
    Perl: 5.30.3 - /usr/bin/perl
    Protoc: 25.2 - /opt/homebrew/bin/protoc
    Python: 3.11.5 - /Users/rajatkantinandi/miniconda3/bin/python
    Python3: 3.11.5 - /Users/rajatkantinandi/miniconda3/bin/python3
    Ruby: 2.6.10 - /usr/bin/ruby
    Rust: 1.66.0 - /Users/rajatkantinandi/.cargo/bin/rustc
  Databases:
    MySQL: 5.7.44 - /opt/homebrew/opt/mysql@5.7/bin/mysql
    SQLite: 3.41.2 - /Users/rajatkantinandi/miniconda3/bin/sqlite3

• React Native Tools extension version: 1.12.3
• Expo SDK version (if applicable): 50.0.6

[EzioLi01]

Hey @rajatkantinandi , thanks for reaching us. Could you please provide a demo to repro this issue, maybe it caused by some new features we added soon? For the temporary workaround, you can right click extension to open context menu, select install another version, using previous version for debugging.

[rajatkantinandi]

Thanks for the quick reply and your suggestion. I tried v1.11.2 now. It is starting the React native packager successfully there but it is not recognising the expo config file app.config.js instead looking for app.json. Is there a way to specify the config file & is there a way to specify which port to run on?

[rajatkantinandi]

Here is how I repro the issue with the latest version of the extension:

https://github.com/microsoft/vscode-react-native/assets/17743895/62a7cc55-27f2-4df0-b9dc-915affad7cc2

[EzioLi01]

Thanks for the details, will look into this. Any update will comment here.

[EzioLi01]

Thanks for the quick reply and your suggestion. I tried v1.11.2 now. It is starting the React native packager successfully there but it is not recognising the expo config file app.config.js instead looking for app.json. Is there a way to specify the config file & is there a way to specify which port to run on?

For now we only support app.json file, but we have plan to extend support for app.config.js in the future. The default port for expo should be 9222, you can add port argument in launch.json to set specific one.

[EzioLi01]

Hey @rajatkantinandi , I have tried on latest expo template in monorepo and no luck to repro it. It may be caused by some specific settings in you project. Is it possible to share a minimal repo to reproduce this issue?

[rajatkantinandi]

I think you are right. It is an issue with the project as it ran fine on a separate project. But it was introduced in a recent version because of this PR https://github.com/microsoft/vscode-react-native/pull/2061. Here it started looking at VSCode workspace setting file to find a setting. We have a workspace file with .code-workspace format. But inside this file VSCode does not do any JSON validation and if you put trailing commas like you can in JS it still works and VSCode does not complain. But here we are trying to parse the file as a JSON and if it has trailing commas it throws an error while parsing.

I was able to find out after debugging the source code in this repo by looking for all the instances where we do JSON.parse and then fixed the issue by fixing my workspace config using a JSON validator.

So, I am wondering if we should add a try-catch block around the JSON.parse code here and add a better error message like: Failed to parse VSCode workspace config at path: ${settingsPath}. Please make sure your VSCode config file is a valid JSON file and validate it with a JSON validator if needed to fix this issue.

[rajatkantinandi]

I can raise a PR if you guys think this is a good idea to show a better error message here.

[EzioLi01]

Hey @rajatkantinandi , good catch! I think you're right and the extra commas can be improved in related logic. We welcome contribution PR, but actually MS updates some security policies, currently forked repo cannot trigger PR pipeline build so we cannot merge forked PR into master.

I will work on this soon and if you have any suggestion please comment here.