React with Fluent UI Tab - npm install failed for dependencies conflict

[hund030]

Describe the bug npm install failed for dependencies conflict. @microsoft/mgt-react has peerDependency react@17 while the tab app depends on react@18. @microsoft/mgt-react adds this peerDependency from 2.11.0. https://github.com/microsoftgraph/microsoft-graph-toolkit/compare/v2.10.1..v2.11.0#diff-f3863d6bcb413aa8c6b44e2cce19834d5192449ab3766d2beb7f6107c8d8d3ebR41

To Reproduce Steps to reproduce the behavior:

1. Install Teams Toolkit v5.0
2. Create a new project -> Tab -> React with Fluent UI
3. F5 / deploy / Run npm i in the root folder
4. Get the error:

   npm ERR! code ERESOLVE
   npm ERR! ERESOLVE unable to resolve dependency tree
   npm ERR!
   npm ERR! While resolving: zhijieapp06020@0.1.0
   npm ERR! Found: react@18.2.0
   npm ERR! node_modules/react
   npm ERR!   react@"^18.2.0" from the root project
   npm ERR!
   npm ERR! Could not resolve dependency:
   npm ERR! peer react@"^17.0.1" from @microsoft/mgt-react@2.11.0
   npm ERR! node_modules/@microsoft/mgt-react
   npm ERR!   @microsoft/mgt-react@"^2.8.0" from the root project
   npm ERR!
   npm ERR! Fix the upstream dependency conflict, or retry
   npm ERR! this command with --force, or --legacy-peer-deps
   npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

[ghost]

Thank you for contacting us! Any issue or feedback from you is quite important to us. We will do our best to fully respond to your issue as soon as possible. Sometimes additional investigations may be needed, we will usually get back to you within 2 days by adding comments to this issue. Please stay tuned.

[hund030]

There are several ways to workaround:

1. Downgrade @microsoft/mgt-react to 2.10.0
2. Downgrade react to 17.0.1
3. Use npm i --legacy-peer-deps instead. In Teams Toolkit V5, the install command can be customized in teamsapp.yml or teamsapp.local.yml.

   - uses: cli/runNpmCommand
   with:
     workingDirectory: .
     args: install --no-audit --legacy-peer-deps

[davrous]

This fixes the issue (in package.json):

"dependencies": { "@fluentui/react-components": "^9.18.0", "@microsoft/mgt-element": "2.8.0", "@microsoft/mgt-react": "2.8.0", "@microsoft/mgt-teamsfx-provider": "2.8.0", "@microsoft/microsoft-graph-client": "3.0.1", "@microsoft/teams-js": "^2.7.1",

We should then lock our templates references to a fixed version in the future to avoid having similar issues.

[therealjohn]

Thanks for reporting this. It looks like it's resolving 2.11.0 because of the ^2.8.0 in the package.json, which normally should be OK. Unfortunately, it's unexpected that 2.11.0 would requierd React 17 when previous minor versions supported React 18.

The issue seems to be upstream with the mgt-* packages and I've filed an issue: https://github.com/microsoftgraph/microsoft-graph-toolkit/issues/2386

[sebastienlevert]

Hi! I'm Seb from the Graph Toolkit team. We are currently looking into these dependencies issues and will be providing a fix. We will be updating this issue when we are back to normal. Thanks!

[gavinbarron]

Hi, I'm Gavin from the Graph Toolkit team! We have shipped a fix that removes the peer dependency and resolves this issue. I'm very sorry for the inconvenience that this has caused you.

[hund030]

@sebastienlevert @gavinbarron Thank you for the quick fix. I have verified the issues has been resolved.