issues debugging with vite in display-test-app and display-performance-test-app

markschlosseratbentley commented 1 year ago

Describe the bug If you run display-test-app using npm run start, it will not pick up local changes to the frontend code when you rebuild and run it again.

To Reproduce

make a git clone of iTwin.js core
rush install
rush build --to display-test-app
cd test-apps/display-test-app then npm run start
Open debugger and observe that Clipping.ts (in frontend) can be opened with ctrl+p.
Edit a frontend file like glsl/Clipping.ts
Terminate display-test-app, then do: rush build --to display-test-app
npm run start
Open debugger and observe that Clipping.ts (in frontend) can no longer be found with ctrl+p.
Search for a js chunk file with code from Clipping.ts. That js chunk file will not have the changes we made earlier!
Quit the app.
npm run start:electron
Observe that the application is running with the latest changes to Clipping.ts. However, you might still not be able to find Clipping.ts in the debugger with ctrl+p.

Expected behavior npm run start should provide .ts files in the debugger for frontend files; it should also pick up local changes to frontend source.

Desktop (please complete the applicable information):

OS: Windows
Browser: Electron
iTwin.js Version: master

Additional context

rush update --full then rebuilding makes npm run start use the latest changes.
In the midst of all my experimentation, I noticed at one point, something called frontend-vite getting built, not just regular frontend. May be related.
When it becomes broken, navigating to the localhost __inspect page shows that no frontend files are found.

MarcNeely commented 1 year ago

@DStradley and I tested this some more and found that with the latest code, running with "run start:electron" does not let you see source code in the chrome debugger either. We tracked it down to PR #5870 (The PR that got merged before it, #5880, seems to work fine and doesn't seem to exhibit all of these various problems.)

aruniverse commented 1 year ago

gah, it should probably be

      sourcemap: !process.env.VITE_CI, // append to the resulting output file if not running in CI.

! not !!

MarcNeely commented 1 year ago

Hmmm, that seems to partly fix it.

When using "npm run start:electron" you can make a change and rebuild with "rush build --to display-test-app" and re-run it and see that changes you made take effect, but in the browser debugger you can only see the .js files for most of the code rather than the .ts files.

When using just "npm run start" you can see the .ts files, but you don't get any new changes that you make unless you do a "rush update --full" before you build.

MarcNeely commented 1 year ago

Well, I take some of that back. The first time I tried modifying code and then using "npm run start" it used & showed the new code in the browser after doing a "rush update --full" and then a build. But now it's stuck and any more changes I make won't get used or shown in the browser debugger, even if a do a "rush update --full" followed by a "rush clean" followed by a "rush build --to display-test-app".

ben-polinsky commented 1 year ago

https://github.com/vitejs/vite/issues/14099

ben-polinsky commented 1 year ago

I'm reopening this until we have a better handle on the situation and compare with previous behavior:

start:electron debug files
Hot Module Replacement (HMR)

pmconne commented 1 year ago

Having pulled in the most recent changes from master:

rush install
rush clean
set IMJS_NO_DEV_TOOLS=1
rush build --to display-test-app
npm run start

Observe: Electron window opens, displays infinite spinner.

Press ctrl-R any number of times to reload, has no visible effect.

Press Ctrl-Shift-I to open dev tools. Press ctrl-R to reload. App finally loads.

Restarting, reinstalling, recleaning, and rebuilding had no effect on this behavior.

markschlosseratbentley commented 1 year ago

See comments on #5953 for other observations.

ben-polinsky commented 1 year ago

FWIW, on Mac OS, I see the same behavior pre/post vite on a new clone of core with most recent changes:

.ts files available to debug in chrome
changes are picked up immediately (HMR) if files within display test app are modified
changes to files in dependencies are not picked up without rush build --to display-test-app

I could not reproduce Paul's issue.

Which platform/OS is in use for those encountering issues? Using any other ENV flags?

markschlosseratbentley commented 1 year ago

FWIW, on Mac OS, I see the same behavior pre/post vite on a new clone of core with most recent changes:

.ts files available to debug in chrome

changes are picked up immediately (HMR) if files within display test app are modified

changes to files in dependencies are not picked up without rush build --to display-test-app

I could not reproduce Paul's issue.

Which platform/OS is in use for those encountering issues? Using any other ENV flags?

I was testing on Electron on Windows 11. Not using any non-standard ENV flags AFAIK.

pmconne commented 1 year ago

I could not reproduce Paul's issue. Which platform/OS is in use for those encountering issues? Using any other ENV flags?

Environment vars: IMJS_DISABLE_DIAGNOSTICS=1 IMJS_NO_DEV_TOOLS=1 IMJS_NO_MAXIMIZE_WINDOW=1 IMJS_WINDOW_SIZE=1920,1200

I continue to observe the problem. Testing on Windows 11. I can test on Ubuntu 22.04 if you want.

@markschlosseratbentley are you or anyone else observing the same problem I describe (infinite spinner unless dev tools are open)?

ben-polinsky commented 1 year ago

I'm less convinced it's OS-specific. @Ben-Pusey-Bentley I assume you have not reproduced this spinner issue?

Ben-Pusey-Bentley commented 1 year ago

I'm less convinced it's OS-specific. @Ben-Pusey-Bentley I assume you have not reproduced this spinner issue?

Not yet, but I should try with the rest of the environment variables that Paul has given us.

markschlosseratbentley commented 1 year ago

I could not reproduce Paul's issue. Which platform/OS is in use for those encountering issues? Using any other ENV flags?

Environment vars: IMJS_DISABLE_DIAGNOSTICS=1 IMJS_NO_DEV_TOOLS=1 IMJS_NO_MAXIMIZE_WINDOW=1 IMJS_WINDOW_SIZE=1920,1200

I continue to observe the problem. Testing on Windows 11. I can test on Ubuntu 22.04 if you want.

@markschlosseratbentley are you or anyone else observing the same problem I describe (infinite spinner unless dev tools are open)?

I just tried to reproduce your infinite spinner observation using your environment variables, using both npm run start and npm run start:electron. I do not observe that particular issue. I can open iModels, etc.

Ben-Pusey-Bentley commented 1 year ago

I could not reproduce Paul's issue. Which platform/OS is in use for those encountering issues? Using any other ENV flags?

Environment vars: IMJS_DISABLE_DIAGNOSTICS=1 IMJS_NO_DEV_TOOLS=1 IMJS_NO_MAXIMIZE_WINDOW=1 IMJS_WINDOW_SIZE=1920,1200 I continue to observe the problem. Testing on Windows 11. I can test on Ubuntu 22.04 if you want. @markschlosseratbentley are you or anyone else observing the same problem I describe (infinite spinner unless dev tools are open)?

I just tried to reproduce your infinite spinner observation using your environment variables, using both npm run start and npm run start:electron. I do not observe that particular issue. I can open iModels, etc.

I am also still unable to reproduce this issue, even with the additional environment variables.

pmconne commented 1 year ago

I am also still unable to reproduce this issue, even with the additional environment variables.

Huh, neither can I, today. I don't know what would have changed since yesterday. Thanks for testing.

iTwin / itwinjs-core

issues debugging with vite in display-test-app and display-performance-test-app #5929