Breakpoints in Parcel React TypeScript app now always hit when HTML pages served from separate web server (ASP .NET Core)

[dsibinski]

🐛 bug report

I'm serving my Parcel React application from a custom URL https://localhost/MyApplication/WebApp. FYI, this is served from an ASP.NET 6 application's endpoint. The endpoint https://localhost/MyApplication/WebApp returns an HTML page, on which some JavaScript is executed and renders React components from the Parcel app.

With this setup, when I open the Parcel app (either built or in watch mode), none of the breakpoints are hit in Chrome debugger (neither in other browsers' debuggers nor VS Code):

However, if I go to https://localhost in the same browser tab and GO BACK to the app's URL https://localhost/MyApplication/WebApp by using the browser's back button, the breakpoint is suddenly hit:

However, subsequent refreshes of the app at URL https://localhost/MyApplication/WebApp don't make the breakpoint hit. Only when I go to another URL (even totally unrelated like google.com) and then use the "Back" browser's button to go back to the Parcel app (https://localhost/MyApplication/WebApp).

🎛 Configuration (.babelrc, package.json, cli command)

My package.json:

{
  "name": "my-app",
  "version": "1.0.0",
  "devDependencies": {
    "@parcel/transformer-sass": "^2.6.0",
    "parcel": "^2.6.0",
    "process": "^0.11.10"
  },
  "scripts": {
    "watch": "npx parcel watch --dist-dir ../wwwroot/MyAppFiles",
    "build": "npx parcel build --dist-dir ../wwwroot/MyAppFiles"
  },
  "source": [
    "src/apps/initApp.ts",
    "src/apps/homeApp.ts"
  ],
  "dependencies": {
    "@types/react": "^18.0.10",
    "@types/react-dom": "^18.0.5",
    "bootstrap": "^5.1.3",
    "mobx-react-lite": "^3.4.0",
    "react": "^18.1.0",
    "react-bootstrap": "^2.4.0",
    "react-dom": "^18.1.0",
    "react-icons": "^4.4.0",
    "react-pro-sidebar": "^0.7.1",
    "react-responsive": "^9.0.0-beta.10",
    "zod": "^3.17.3"
  }
}

I don't have any tsconfig or parcel config file.

This is the .tsx file I'm trying to debug:

Mapped from homeApp.js, which has sourceMapsURL set as follows:

//# sourceMappingURL=homeApp.js.map

🤔 Expected Behavior

The breakpoints should always be hit.

😯 Current Behavior

The breakpoints are only hit when going to the Parcel app from another URL.

💁 Possible Solution

Maybe this is something specific to the fact I server my app from a custom URL? Maybe I'm missing some configuration options?

🔦 Context

I can't debug the app at all. Just trying to make debugging work.

💻 Code Sample

Hard to provide a concrete example, as this would need to be provided with custom ASP.NET Core backend.

🌍 Your Environment

Software	Version(s)
Parcel	2.6.0
Node	16.4.2
npm/Yarn	npm 8.5.0
Operating System	Windows 11

[mischnic]

Hard to provide a concrete example, as this would need to be provided with custom ASP.NET Core backend.

Can't you share a stripped down version of your frontend where code that is executed doesn't trigger a breakpoint?

[dsibinski]

Hi @mischnic ! I created a sample ASP.NET 6 project with Parcel app: https://github.com/dsibinski/DotnetParcelApp The repo's readme contains all info on how to run it.

If you manage to run the app, you can open Chrome DevTools and try to put a breakpoint in LandingPage.tsx:

If you refresh the page, the breakpoint is not hit.

However, if you keep the breakpoint there, go to e.g. https://google.com and then use the browser's back button to go back to the app, the breakpoint is hit:

I noticed another thing. As you could explode in the sample app, the app's components are actually rendered by calling methods exposed on window object (I described more about that approach in ParcelController.cs). So, if you put a breakpoint ALSO in the HTML file where this script is executed:

and refresh the app's page, then the HTML-JS breakpoint is hit first:

and after it, the TSX breakpoint is hit as well:

Maybe that's helpful here.

[dsibinski]

@mischnic any news here?

[dsibinski]

Any news here?

[dsibinski]

hi @mischnic , any news?