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

[andrewconnell]

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

• [ ] 💥 Internet Explorer
• [X] 💥 Microsoft Edge
• [X] 💥 Google Chrome
• [X] 💥 FireFox
• [X] 💥 Safari
• [ ] mobile (iOS/iPadOS)
• [ ] mobile (Android)
• [ ] not applicable
• [ ] other (enter in the "Additional environment details" area below)

Additional environment details

• browser version: observed in all the above selected latest versions, but doesn't appear to be browser dependent
• SPFx version: v1.14 & v1.15
• Node.js version: v16
• Platform: macOS & Windows

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:

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]

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

[AJIXuMuK]

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