[Bug]: Missing devDeps / peerDeps

[kenotron]

trafficstars

Library

React Components / v9 (@fluentui/react-components)

System Info

In using the @fluentui/react-components in a pnpm / yarn4 pnpm linker styled monorepo, I noticed *at least* some components package.json from FUI is missing some devDeps on things like @fluentui/react-jsx-runtime + scheduler

Here's an example of this issue in storybook + yarn 4 w/ pnpm linker 


ERROR in ./node_modules/.store/@fluentui-react-aria-virtual-ba17ea4726/package/lib/AriaLiveAnnouncer/renderAriaLiveAnnouncer.js 1:2-72
Module not found: Error: Can't resolve '@fluentui/react-jsx-runtime/jsx-runtime' in '/workspaces/teams-client-sidecars/node_modules/.store/@fluentui-react-aria-virtual-ba17ea4726/package/lib/AriaLiveAnnouncer'
ERROR in ./node_modules/.store/@fluentui-react-context-selector-virtual-d4c83de221/package/lib/createContext.js 3:0-115
Module not found: Error: Can't resolve 'scheduler' in '/workspaces/teams-client-sidecars/node_modules/.store/@fluentui-react-context-selector-virtual-d4c83de221/package/lib'

### Are you reporting Accessibility issue?

no

### Reproduction

https://github.com/kenotron/fluentui-missing-devdeps
Try this: 

yarn cd packages/foo yarn webpack

### Bug Description

## Actual Behavior
This is a bundle error when using FluentUI react components

## Expected Behavior
No errors


### Logs

_No response_

### Requested priority

High

### Products/sites affected

MS Teams

### Are you willing to submit a PR to fix?

yes

### Validations

- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- [X] The provided reproduction is a minimal reproducible example of the bug.

[ValentinaKozlova]

Yarn 4 and pnpm linker are not officially supported, as far as I know. cc: @Hotell

[YufeiMefei]

My team is running into the same error in webpack step while trying to upgrade @fluentui/react-components from v9.19.1 to latest. We are using yarn v3.6.1.

ERROR in ../../.yarn/__virtual__/@fluentui-react-aria-virtual-0b41af605a/0/cache/@fluentui-react-aria-npm-9.8.0-b48e9b1877-a82c344a1d.zip/node_modules/@fluentui/react-aria/lib/AriaLiveAnnouncer/renderAriaLiveAnnouncer.js 1:2-72
Module not found: Error: Can't resolve '@fluentui/react-jsx-runtime/jsx-runtime' in 'C:\designer.app\.yarn\__virtual__\@fluentui-react-aria-virtual-0b41af605a\0\cache\@fluentui-react-aria-npm-9.8.0-b48e9b1877-a82c344a1d.zip\node_modules\@fluentui\react-aria\lib\AriaLiveAnnouncer'
resolve '@fluentui/react-jsx-runtime/jsx-runtime' in 'C:\designer.app\.yarn\__virtual__\@fluentui-react-aria-virtual-0b41af605a\0\cache\@fluentui-react-aria-npm-9.8.0-b48e9b1877-a82c344a1d.zip\node_modules\@fluentui\react-aria\lib\AriaLiveAnnouncer'
  Parsed request is a module
  using description file: C:\designer.app\.yarn\__virtual__\@fluentui-react-aria-virtual-0b41af605a\0\cache\@fluentui-react-aria-npm-9.8.0-b48e9b1877-a82c344a1d.zip\node_modules\@fluentui\react-aria\package.json (relative path: ./lib/AriaLiveAnnouncer)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      request is not managed by the pnpapi
        @fluentui/react-aria tried to access @fluentui/react-jsx-runtime, but it isn't declared in its dependencies; this makes the require call ambiguous and unsound.
        Required package: @fluentui/react-jsx-runtime (via "@fluentui\react-jsx-runtime")
        Required by: @fluentui/react-aria@virtual:33374ab6535e11adaa7b36cdfa49ad3fb16a353414c5817eebd8a78da4b574fc816c97adcf57af6f5f89d103f427f0b6c0b1e11bc309bf10e615656fdda5d7b8#npm:9.8.0 (via C:\designer.app\.yarn\__virtual__\@fluentui-react-aria-virtual-0b41af605a\0\cache\@fluentui-react-aria-npm-9.8.0-b48e9b1877-a82c344a1d.zip\node_modules\@fluentui\react-aria\lib\AriaLiveAnnouncer\)
 @ ../../.yarn/__virtual__/@fluentui-react-aria-virtual-0b41af605a/0/cache/@fluentui-react-aria-npm-9.8.0-b48e9b1877-a82c344a1d.zip/node_modules/@fluentui/react-aria/lib/AriaLiveAnnouncer/index.js 2:0-77 2:0-77
 @ ../../.yarn/__virtual__/@fluentui-react-aria-virtual-0b41af605a/0/cache/@fluentui-react-aria-npm-9.8.0-b48e9b1877-a82c344a1d.zip/node_modules/@fluentui/react-aria/lib/index.js 4:0-171 4:0-171 4:0-171 4:0-171 4:0-171
 @ ../../.yarn/__virtual__/@fluentui-react-components-virtual-33374ab653/0/cache/@fluentui-react-components-npm-9.46.2-5775a9f18c-f871283b1d.zip/node_modules/@fluentui/react-components/lib/index.js 56:0-166 56:0-166 56:0-166 56:0-166 56:0-166

[Hotell]

Yarn 4 and pnpm linker are not officially supported, as far as I know. cc: @Hotell

every package manager is supported. we dont have any integration tests in place though with those packages.

@kenotron

missing some devDeps on things like @fluentui/react-jsx-runtime + scheduler

can you help me out understand why would your package manager wanted to install devDependencies ?

@bsunderhus can you please double check that aria and jsx-runtime are properly specified as dependencies in our packages ?

ty

[bsunderhus]

@bsunderhus can you please double check that aria and jsx-runtime are properly specified as dependencies in our packages ?

I can confirm @fluentui/react-jsx-runtime is properly declared as dependency (not devDepencency) for every v9 component.

@fluentui/react-aria is a case apart as its dependency is more specific per use case, not every v9 component needs it (but every single usage of it is also declared as dependency, not devDependency).

One thing though, we're not declaring @fluentui/react-jsx-runtime as a dependency of @fluentui/react-components. I guess this is not a problem, as it would be an implicit dependency from the other packages

[miroslavstastny]

According to @layershifter @fluentui/react-aria should depend on @fluentui/react-jsx-runtime.

[bsunderhus]

According to @layershifter @fluentui/react-aria should depend on @fluentui/react-jsx-runtime.

good catch, it seems like AriaLiveAnouncer implemented here https://github.com/microsoft/fluentui/pull/30345 introduced a dependency on @fluentui/react-jsx-runtime, I'll follow up with a PR

[Hotell]

can we close this/verify that PR resolved the issue ?

[layershifter]

@Hotell, no. We still have invalid peerDependencies on @fluentui/react-context-selector:

https://github.com/microsoft/fluentui/blob/a440eb78c79b197240148e500b2ea9d3599eaa6f/packages/react-components/react-context-selector/package.json#L39

Which results in ⬇️:

But [email protected] has ^0.23.0:

So, we need to extend the range to include more versions in our requirement.

---

And ideally, somehow automate the install on artifacts in a strict mode to ensure that all dependencies are satisfied.

[microsoft-github-policy-service[bot]]

This issue has been automatically marked as stale because it has marked as requiring author feedback but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment. Thank you for your contributions to Fluent UI!

[layershifter]

The issue is currently reproducible using Vite + Yarn v4 with nodeLinker: pnpm:

Yarn is descriptive about the problem:

➤ YN0002: │ test-deps@workspace:. doesn't provide scheduler (p24cfe), requested by @fluentui/react-components.

By adding it as a dependency, I faced another issue:

➤ YN0060: │ scheduler is listed by your project with version 0.23.0, which doesn't satisfy what @fluentui/react-components (pa379a) and other dependencies request (~0.19.0 || ~0.20.0).

Fixing version to proper ones and removal of invalid peerDependencies fixes Yarn errors (PR is coming):

olfedias@Oleksandrs-MBP test-deps % yarn
➤ YN0000: · Yarn 4.1.0
➤ YN0000: ┌ Resolution step
➤ YN0000: └ Completed
➤ YN0000: ┌ Fetch step
➤ YN0000: └ Completed
➤ YN0000: ┌ Link step
➤ YN0000: └ Completed in 0s 545ms
➤ YN0000: · Done in 0s 824ms

These changes also make pnpm working properly. However, the original issue with Yarn exists until scheduler is added as a dependency like React. This indicates a problem with linker implementation in Yarn, I will open an issue in Yarn once PR will merged.

[Hotell]

his indicates a problem with linker implementation in Yarn,

yarn 4 or yarn-midgard ?

is the same issue present with pnpm or they have it implemented correctly ?

[layershifter]

yarn 4 or yarn-midgard ?

is the same issue present with pnpm or they have it implemented correctly ?

With Yarn v4.

Yarn v4 (linked pnpm)

(scheduler is not there until is a dependency on root package.json)

PNPM

(scheduler is there is matches version installed by React)