Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
lucaraccis opened this issue Nov 13, 2024 · 3 comments
Open

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

lucaraccis opened this issue Nov 13, 2024 · 3 comments

Comments

@lucaraccis
Copy link

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
Copy link
Owner

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
Copy link
Author

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

@s-KaiNet
Copy link
Owner

if the error points to sockjs.js, maybe it's something with the live reload, because it uses web sockets. In the fast-serve webpack.extend.jstry to set:

const webpackConfig = {
  //...
  devServer: {
    liveReload: false,
  },
};

you will lose the automatic reloading, but maybe you will find the cause of the problem.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@s-KaiNet @lucaraccis