search

s-KaiNet / spfx-fast-serve

Improve your SharePoint Framework development flow by speeding up the "serve" command :rocket:
MIT License
137 stars 11 forks source link

Browser Freezes on Debug with SPFx Fast Serve in Solution with Two Web Parts #156

Open lucaraccis opened 2 days ago

lucaraccis commented 2 days ago

Hi. I'm a regular user and fan of spfx-fast-serve.

I have a SharePoint Framework (SPFx) solution with two web parts where I've installed the spfx-fast-serve module. Recently, I encountered an issue when running npm run serve followed by debugging in the browser: the browser completely freezes without throwing any errors.

Steps to Reproduce

  1. Run npm run serve.
  2. Start debugging the SPFx solution in a browser (tested on both Edge and Chrome).
  3. Observe the browser freezing completely.

Additional Information If I open one of the web parts by pasting the URL into an open browser window (not in debug mode), everything runs smoothly, and I'm able to debug ONLY via the browser. If I run gulp serve than start the debugger through VS Code with Edge or Chrome, everything runs smoothly (but if i made some changes on the code, most of the times I need to cancel the serve than run it again) In a random attempt I made yesterday, launching the command npm run serve, I managed to debug from the browser, but at the next stop, it stopped working again and I abandoned the module again. I would like to use it as it is much more effective than the standard one.

I know that there's no much infos but I don't know what I can share to detail the issue :(

Any insights or potential fixes for this issue would be greatly appreciated.

s-KaiNet commented 13 hours ago

yeah... it's difficult to debug such kind of problems, Personally I have never seen this issue and nobody reported it so far. The only thing I can advise is trying to check, what makes it freeze. For example, you can start removing (commenting) extra code from web part, making it very simple and see if the issue is still available. Then add code back and check if there is a difference. Or maybe it's one of the webparts or components in the bundle is guilty. In this case, you can try removing components from config/config.json and see if it helps. By doing this maybe you will find out what piece of code causes this freezes. Alternatively, if you know when it started to happen, checkout a previous code and compare, what might be wrong.

lucaraccis commented 10 hours ago

Thanks @s-KaiNet for the reply.

Unfortunately it's a big solution with 2 big webparts that works like an SPA, so checking out a previous version and retry can be time consuming considering also that we are in the final phase of the development. But I will try in my free time because it's a personal challenge, now :) the build-webpack-serve it's something I don't know well and would like to explore further.

I put my faith in the config file, but removing both the webparts doesn't change the outcome. Browser freezed! The only thing that I can see when the browser stops responding, is this error in debug console of vs code:

Could not read source map for https://localhost:4321/dist/search-cv-web-part.js: Unexpected 404 response from https://localhost:4321/dist/sockjs.js.map: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Error</title>
</head>
<body>
<pre>Cannot GET /dist/sockjs.js.map</pre>
</body>
</html>

I will try to clean and keep as minimum defaults the render method of the webparts ts file, but I think it's more related to some npm packages.

I'll keep you updated and of course if the previous error sounds familiar to you let me know.

Thanks Luca