[Bug]: Cannot find module '@fluentui/react-jsx-runtime/jsx-runtime' from 'node_modules/@fluentui/react-provider/lib-commonjs/components/FluentProvider/renderFluentProvider.js'

[NataliaKravcheniaTR]

Library

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

System Info

System:
    OS: Windows 10 10.0.19044
    CPU: (8) x64 Intel(R) Xeon(R) Platinum 8171M CPU @ 2.60GHz
    Memory: 13.82 GB / 32.00 GB
  Browsers:
    Chrome: 107.0.5304.0.
    Edge: Spartan (44.19041.1266.0), Chromium (116.0.1938.69)
    Internet Explorer: 11.0.19041.1566

Are you reporting Accessibility issue?

None

Reproduction

I don't know how to add tests in sandboxes

Bug Description

Started to reproduce today.

Actual Behavior

Test suite failed to run

Cannot find module '@fluentui/react-jsx-runtime/jsx-runtime' from 'node_modules/@fluentui/react-provider/lib-commonjs/components/FluentProvider/renderFluentProvider.js'

Require stack:
  node_modules/@fluentui/react-provider/lib-commonjs/components/FluentProvider/renderFluentProvider.js
  node_modules/@fluentui/react-provider/lib-commonjs/components/FluentProvider/FluentProvider.js
  node_modules/@fluentui/react-provider/lib-commonjs/components/FluentProvider/index.js
  node_modules/@fluentui/react-provider/lib-commonjs/FluentProvider.js
  node_modules/@fluentui/react-provider/lib-commonjs/index.js
  node_modules/@fluentui/react-components/lib-commonjs/index.js

Expected Behavior

Previously run successfully

Logs

Cannot find module '@fluentui/react-jsx-runtime/jsx-runtime' from 'node_modules/@fluentui/react-provider/lib-commonjs/components/FluentProvider/renderFluentProvider.js'

    Require stack:
      node_modules/@fluentui/react-provider/lib-commonjs/components/FluentProvider/renderFluentProvider.js
      node_modules/@fluentui/react-provider/lib-commonjs/components/FluentProvider/FluentProvider.js
      node_modules/@fluentui/react-provider/lib-commonjs/components/FluentProvider/index.js
      node_modules/@fluentui/react-provider/lib-commonjs/FluentProvider.js
      node_modules/@fluentui/react-provider/lib-commonjs/index.js
      node_modules/@fluentui/react-components/lib-commonjs/index.js

Requested priority

Blocking

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

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

[TristanWatanabe]

@NataliaKravcheniaTR This is only happening in a testing environment? What framework do you use for testing? Without a repro example, it will be hard for us to investigate the issue. If codesandbox isn't ideal, if you could set up a minimal reproduction of the error you're getting in your own repo that we can clone that would be helpful.

[spmonahan]

@TristanWatanabe I noticed this yesterday but haven't been able to 100% repro it. It seems like the issue was introduced in 9.30.3

• 9.30.3
• 9.30.2

I just created a new sandbox using our v9 template and pinned the @fluentui/react-components version.

I think this is the same issue as #29086

[TristanWatanabe]

@spmonahan Not totally sure if it's related to @NataliaKravcheniaTR's issue but in the codesandbox case, we'll need to update our template dependencies to get it working again. In #28959, it explicitly states that react dependencies will now have to be version 16.14.0 and up to work correctly. To fix the codesandbox I had to do the following:

1. Add @fluentui/react-jsx-runtime as a dependency.
2. Update react and react-dom versions to 16.14.0
3. Add @types/react dependency set to 16.14.0 as well

https://codesandbox.io/s/react-components-9-30-3-forked-54cqcw?file=/package.json

[TristanWatanabe]

@NataliaKravcheniaTR can you try adding @fluentui/react-jsx-runtime as a dependency in your codebase and see if that resolves your issue? Also ensure that your react dependencies are >= 16.14.0 like my comment outlines above

[NataliaKravcheniaTR]

@TristanWatanabe It's only reproducing in a testing environment. Jest 28.
I've updated a few libraries in the project and it is fixed the issue, I think that updating jest 28 to jest 29 fixed the issue.

[spmonahan]

1. @fluentui/react-jsx-runtime

Thanks! I've updated the template.

[TristanWatanabe]

@TristanWatanabe It's only reproducing in a testing environment. Jest 28. I've updated a few libraries in the project and it is fixed the issue, I think that updating jest 28 to jest 29 fixed the issue.

@NataliaKravcheniaTR Thanks for the update! Can we close this issue now?

[daka24]

@spmonahan Not totally sure if it's related to @NataliaKravcheniaTR's issue but in the codesandbox case, we'll need to update our template dependencies to get it working again. In #28959, it explicitly states that react dependencies will now have to be version 16.14.0 and up to work correctly. To fix the codesandbox I had to do the following:

1. Add @fluentui/react-jsx-runtime as a dependency.
2. Update react and react-dom versions to 16.14.0
3. Add @types/react dependency set to 16.14.0 as well

https://codesandbox.io/s/react-components-9-30-3-forked-54cqcw?file=/package.json

@TristanWatanabe, I have used your code above and run it locally, but this issue still happens to me.

Package manager: yarn
Node version: 14.20.0

[daka24]

@spmonahan Not totally sure if it's related to @NataliaKravcheniaTR's issue but in the codesandbox case, we'll need to update our template dependencies to get it working again. In #28959, it explicitly states that react dependencies will now have to be version 16.14.0 and up to work correctly. To fix the codesandbox I had to do the following:

1. Add @fluentui/react-jsx-runtime as a dependency.
2. Update react and react-dom versions to 16.14.0
3. Add @types/react dependency set to 16.14.0 as well

https://codesandbox.io/s/react-components-9-30-3-forked-54cqcw?file=/package.json

@TristanWatanabe, I have used your code above and run it locally, but this issue still happens to me.

Package manager: yarn
Node version: 14.20.0

No problem, fixed by updating to v9.31