Module not found - Wrong @fluentui imports cause webpack build errors

[hohenp]

Category

[ ] Enhancement

[X ] Bug

[ ] Question

Version

Version: 3.17.0

Expected / Desired Behavior / Question

We are using the spfx-controls-react within a webpack project and would expect to build it without webpack errors.

Observed Behavior

We are using the spfx-controls-react within a webpack project. When we build the project we get several webpack errors like:

Steps to Reproduce

We could identify the used imports of the @FluentUI package to cause that issue:
You are using for example the following import:
import { ActionButton, PrimaryButton } from "@fluentui/react/lib/components/Button";
The correct import would be:
import { PrimaryButton } from '@fluentui/react/lib/Button';
as described on the fluent ui page

You can also check the export section of the @FluentUI package.json file.
There for example the button is declared as

"./lib/Button": {
      "types": "./lib/Button.d.ts",
      "import": "./lib/Button.js",
      "require": "./lib-commonjs/Button.js"
    },

so without the /components/ section of the import you are using.

For testing we fixed the wrong imports in the following files and that fixed all build errors we got

Could you please check all your imports of the @FluentUI package?

Thanks
Pascal

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[github-actions]

Thank you for submitting your first issue to this project.

[hohenp]

Hello, could someone look into this?

[joelfmrodrigues]

@hohenp many thanks for reporting this issue. Would you be interested in submitting a PR with the required changes?

[raclettierer]

@joelfmrodrigues fix for the fluentui import are done and ready for review

[raclettierer]

@AJIXuMuK wo will approve PRs ? we still waiting on this change.