SPFX 1.22: missing dev dependency #10440
Description
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 1.22.0-beta.2
- Node 22.17.1
Describe the bug / error
Same behavior than the #9172.
When using modern package manager, which requires a lot more rigorous dependency management (in order to prevent phantom dependency, as described by rush stack), all used dependencies must be explicitly declared.
In my case, when using pnpm with the out of the box bootstrapped project, the package @types/heft-jest is missing a cause build error:
pnpm build
[email protected] build c:\code\spfx122
heft build --clean
---- 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] Encountered 1 TypeScript issue:
[build:typescript] Error: Cannot find type definition file for 'heft-jest'.
[build:typescript] The file is in the program because:
[build:typescript] Entry point of type library 'heft-jest' specified in compilerOptions
[build:typescript] Copied 4 files and linked 0 files
-------------------- Failed (2.654s) --------------------
Encountered 1 error
[build:typescript] Cannot find type definition file for 'heft-jest'.
The file is in the program because:
Entry point of type library 'heft-jest' specified in compilerOptions
ELIFECYCLE Command failed with exit code 1.
Steps to reproduce
Bootstrap a new SPFX project using the following commands:
pnpm --package yo@latest --package @microsoft/generator-sharepoint@next --package mem-fs@latest dlx yo @microsoft/sharepoint --skip-install --package-manager pnpm
Choose these options:
_-----_ ╭──────────────────────────╮
| | │ Welcome to the Microsoft │
|--(o)--| │ 365 SPFx Yeoman │
`---------´ │ [email protected] │
( _´U`_ ) ╰──────────────────────────╯
/___A___\ /
| ~ |
__'.___.'__
´ ` |° ´ Y `
See https://aka.ms/spfx-yeoman-info for more information on how to use this generator.
The pnpm package manager will be used.
Let's create a new Microsoft 365 solution.
? What is your solution name? spfx-122
? Which type of client-side component to create? WebPart
Add new Web part to solution spfx-122.
? What is your Web part name? Hello122
? Which template would you like to use? React
Install the dependencies:
pnpm i
Try to build:
pnpm build
🟥 Compilation fails
Add the missing dependency:
pnpm add @types/heft-jest -D
Then try to build again
pnpm build
🟩 This time it's ok
Output:
pnpm build
> [email protected] build D:\code\protos\spfx122
> heft build --clean
---- build started ----
[build:clean] Deleted 0 files and 3 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] Copied 4 files and linked 0 files
[build:lint] Using ESLint version 8.57.1
[build:webpack] Using Webpack version 5.95.0
[build:webpack] Running Webpack compilation
---- build finished (5.725s) ----
-------------------- Finished (5.727s) --------------------
Expected behavior
Dependencies should be explicit and not rely on bad behavior of npm. Any package manager that follow node's resolution should work out of the box : npm, pnpm, yarn and bun.
As I wished in the #8945, you should consider including such tests before releasing your packages.