Web Part Missing in Toolbox After Running Gulp Serve

[Sucharita993]

Target SharePoint environment

SharePoint Online

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

💥 SharePoint Framework

Developer environment

Windows

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

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

Additional environment details

• SPFx version - 1.18.2
• Browser version - latest

Describe the bug / error

After running the gulp serve command to launch an existing SPFx project locally, the web part is not appearing in the toolbox. It was functioning perfectly until December 11th, but the issue began on December 12th.

Steps to reproduce

1. Take a sample spfx project
2. give gulp serve in cmd

Expected behavior

Expected the webpart to be listed under local category.

[Sucharita993]

Sharing screenshots of DevTools console errors.

[AJIXuMuK]

@Sucharita993 - thank you for reporting the issue.
We have identified the problem and will be working on the fix.

In a meanwhile, as a workaround, copy all the generated files from temp to temp/build folder.
It should unblock you while we're working on the fix

[AJIXuMuK]

Here is the gulptask you can add to your gulpfile.js to automatically copy the files:

// add these after const build = require('@microsoft/sp-build-web');
const fs = require('fs');
const path = require('path');

// Insert this code before build.initialize(require('gulp'));
const copyTask = build.subTask('copy-to-build', function (gulp, buildOptions, done) {
  const srcFolder = './temp';
  const destFolder = './temp/build';
  // Check if the destination folder exists, if not, create it
  if (!fs.existsSync(destFolder)) {
    fs.mkdirSync(destFolder, { recursive: true });
}

// Copy files from srcFolder to destFolder, excluding destFolder itself
return gulp.src([path.join(srcFolder, '**/*'), '!' + destFolder])
  .pipe(gulp.dest(destFolder));
});

build.rig.addPostBundleTask(copyTask);