Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
hohenp opened this issue Feb 13, 2024 · 8 comments
Closed

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

hohenp opened this issue Feb 13, 2024 · 8 comments
Labels
status:fixed-next-drop Issue will be fixed in upcoming release. type:enhancement New feature or enhancement of existing capability
Milestone

Comments

@hohenp
Copy link

hohenp commented Feb 13, 2024

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:
image

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
image

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

Thanks
Pascal

@ghost
Copy link

ghost commented Feb 13, 2024

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

@ghost ghost added the Needs: Triage 🔍 label Feb 13, 2024
Copy link

Thank you for submitting your first issue to this project.

@hohenp
Copy link
Author

hohenp commented Mar 7, 2024

Hello, could someone look into this?

@joelfmrodrigues joelfmrodrigues added Good First Issue 🏆 type:enhancement New feature or enhancement of existing capability and removed Needs: Triage 🔍 labels Mar 14, 2024
@joelfmrodrigues
Copy link
Collaborator

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

@raclettierer
Copy link
Contributor

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

@raclettierer
Copy link
Contributor

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

joelfmrodrigues pushed a commit that referenced this issue Apr 21, 2024
* Fix imports

* #1763 Fix wrong FluentUI imports
@joelfmrodrigues joelfmrodrigues added status:fixed-next-drop Issue will be fixed in upcoming release. and removed Good First Issue 🏆 labels Apr 21, 2024
@joelfmrodrigues joelfmrodrigues added this to the 3.18.0 milestone Apr 21, 2024
@joelfmrodrigues
Copy link
Collaborator

@hohenp the PR from @raclettierer is now merged. Would it be possible for you to test using the beta release please and let us know the outcome?

@hohenp
Copy link
Author

hohenp commented Apr 22, 2024

Hi, I have tested the 3.18.0-beta.8771998 and can confirm that it works correct.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
status:fixed-next-drop Issue will be fixed in upcoming release. type:enhancement New feature or enhancement of existing capability
Projects
None yet
Development

No branches or pull requests

4 participants