No webpart in workbench when using SPFx 1.22 #10431
Description
What type of issue is this?
Question
What SharePoint development model, framework, SDK or API is this about?
💥 SharePoint Framework
Target SharePoint environment
SharePoint Online
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
- Microsoft Edge (v140.0.3485.94), Zen Browser (v1.16.3b)
- SPFx version: 1.22 beta.2
- Node.js version: 22.18
Issue description
I am trying out the current beta version of SPFx 1.22 and Heft.
I had a webpart created with React and was trying to run it in a dev environment.
With gulp, I was always able to display the page with “gulp serve” and see changes after reloading.
With Heft, I have the problem that “heft start” opens the SharePoint Workbench, but my webpart is not there and I can't see it in the list.
I tried the other npm commands, but none of them let me display the web part.
When the Workbench opens, the following message is displayed:
Translated:
Warning
Your web part is not displayed in the toolbox. Make sure that “gulp serve” is running in a web part project. Refresh the page once “gulp serve” is running.
This is typical behavior when opening Workbench without “gulp serve,” but I no longer have gulp with SPFx 1.22.
What is the current workaround here?
Console output:
> heft start --clean
The "heft start" alias was expanded to "heft build-watch --serve".
Starting incremental build...
---- build started ----
[build:clean] Deleted 0 files and 5 folders
[build:set-browserslist-ignore-old-data-env-var] Setting environment variable BROWSERSLIST_IGNORE_OLD_DATA=1
[build:sass] Generating sass typings...
[build:copy-strings] Copied 1 file and linked 0 files
[build:sass] Generated sass typings
[build:typescript] Using TypeScript version 5.3.3
[build:typescript] Starting compilation in watch mode...
[build:typescript] Found 0 errors. Watching for file changes.
[build:typescript] Copied 4 files and linked 0 files
Immediate rerun requested. Executing.
[build:lint] Linting isn't currently supported in watch mode
New run requested by typescript
Cancelling incremental build...
[build:webpack] Using Webpack version 5.95.0
[build:webpack] Starting webpack-dev-server
[build:webpack] Started Webpack Dev Server at https://127.0.0.1:4321
[build:webpack] Running incremental Webpack compilation
[build:configure-webpack-serve] ╔════════════════════════════════════════════════════╗
[build:configure-webpack-serve] ║ To load your scripts, use this debug query ║
[build:configure-webpack-serve] ║ string: ║
[build:configure-webpack-serve] ╚════════════════════════════════════════════════════╝
[build:configure-webpack-serve] ?noredir=true&debugManifestsFile=https%3A%2F%2Flocalhost%3A4321%2Ftemp%2Fbuild%2Fmanifests.js
[build:configure-webpack-serve]
webpack 5.95.0 compiled successfully in 4086 ms
---- build cancelled (18.869s) ----
-------------------- Aborted (18.873s) --------------------
Starting incremental build...
---- build started ----
[build:set-browserslist-ignore-old-data-env-var] Setting environment variable BROWSERSLIST_IGNORE_OLD_DATA=1
[build:typescript] File change detected. Starting incremental compilation...
[build:typescript] Found 0 errors. Watching for file changes.
[build:webpack] Webpack has not detected changes. Listing previous diagnostics.
---- build finished (0.235s) ----
-------------------- Finished (0.243s) --------------------