search

SharePoint / sp-dev-docs

SharePoint & Viva Connections Developer Documentation
https://docs.microsoft.com/en-us/sharepoint/dev/
Creative Commons Attribution 4.0 International
1.24k stars 1k forks source link

🐞SPFx v1.15 (and prior) - gulp serve race condition #8258

Open andrewconnell opened 2 years ago

andrewconnell commented 2 years ago

Target SharePoint environment

SharePoint Online

What SharePoint development model, framework, SDK or API is this about?

💥 SharePoint Framework

Developer environment

macOS

What browser(s) / client(s) have you tested

Additional environment details

Describe the bug / error

This happened periodically before, but with SPFx v1.15 it's happening 100% of the time. I verified this with other developers first.

When running gulp serve, the build toolchain launches the external browser with the default testing URL of the hosted workbench at the start of the tasks, but if the browser loads the hosted workbench before the local webserver is running to serve up the manifest.js file, the workbench reports the following error:

Screen Shot 2022-07-01 at 5 11 06 PM

This is because the local build toolchain hasn't finished building & thus spinning up the local webserver to serve up the manifest.js file. Classic definition of a race condition.

I observed this happening prior to 1.15 but not with much frequency. Now I see it 100% of the time on multiple machines. Looking at the definition of the serve task, it's running tasks in serial and the first one is the serve task.

💡 Proposed solution

Change the order of the tasks - only start the gulp serve task AFTER the local project is built & the web server is running.

The serve task is defined in the NPM package @microsoft/sp-build-web v1.15.0... specifically look at the generated JS:

./lib/SPWebBuildRig.js line 124:

result.set(WebBuildRigConstants_1.WebBuildRigConstants.tasks.serve, {
    executable: (0, gulp_core_build_1.serial)(spBuildCoreTasks.serve, (0, gulp_core_build_1.watch)(exports.serveWatchFilter, (0, gulp_core_build_1.serial)(this._preTelemetryTask, result.get(WebBuildRigConstants_1.WebBuildRigConstants.tasks.bundle).executable, gulp_core_build_serve_1.reload, this._postTelemetryTask))),
    arguments: (yargs) => { .. }
});

The beginning of the executable property shows how it's running tasks in serial, starting with the serve task.

Steps to reproduce

  1. Create new SPFx project (any type of component)
  2. Edit the ./config/serve.json to point to your hosted workbench.
  3. Execute gulp serve
  4. Observe the error displayed above

Workaround

  1. Kick kitten 🐈
  2. Wait until the console gets to the internal gulp task reload
  3. Refresh the workbench in the server, now works as expected, because now the server is working

Expected behavior

Workbench wouldn't load until AFTER the local webserver has started and can serve up the built files.

ghost commented 2 years ago

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

AJIXuMuK commented 2 years ago

Thanks @andrewconnell for reporting the issue! We're working on the fix.

matteogrechi commented 3 weeks ago

Any news about on this issue?