Fluentui: 7.111.1 components not rendering

[monzerhijazi]

Environment Information

• Package version(s): 7.111.1
• Browser and OS versions: Chrome

Please provide a reproduction of the bug in a codepen:

Actual behavior:

mport {PrimaryButton} from '@fluentui/react/lib/Button'; return <PrimaryButton>I am a button.</PrimaryButton>

Component not rendering
Error: Element type is invalid: expected a string

Expected behavior:

Button shows up.

When I reverted to 7.110.5 everything works as expected.

[aneeshack4]

@monzerhijazi Thanks for reaching out to us. If you provide a codepen that uses this version and shows what you're trying to do, we can better assist.

[wsfuller]

@aneeshack4 Wanted to follow up on this. I put up a Stack Overflow question about this problem last night.

I can confirm that @monzerhijazi is correct in version 7.110.5 is working as expected.

1. No component exports from PrimaryButton, Fabric, Text any and all components tried are not exporting from the library
2. package name is @fluentui/react version 7.111.x
3. None of the components tried are being exported
4. I would expect the components to be exported correctly and functional
5. I used this project yesterday as a sanity check https://github.com/sumitkharche/fluent-ui-todo-app and could verify no components were exporting in this project either.

Essentially I have never used or heard of Fluent UI till a couple weeks ago. I discovered this issue while going through the Get Started Fluent UI React portion of the library. Upon installation and import of a component I got errors that the component is not being exported. Doing more digging I was able to install office-ui-fabric-react v7.111.1 using yarn add office-ui-fabric-react and get expected working results.

Lastly I'm unsure why the Get Started is using @fluentui/react to import components when all the documentation is importing office-ui-fabric-react it is leading to some confusion on how to properly use the library as intended and having to be creative to get it to work.

[monzerhijazi]

I just tried creating a baseic fluent ui component. The only thing I had was a button and it wasn't working. Reverting the version fixed this issue for me.

import {PrimaryButton} from '@fluentui/react/lib/Button';

export default class NewForm extends React.Component<INewFormProps, {}> {
  public onSubmit() {
  }
  public render(): React.ReactElement<IChangeManagementFormProps> {
    return <PrimaryButton onClick={() => this.submit()}>Save</PrimaryButton>
  }

}

[ecraig12345]

Thanks everyone for reporting this! We're looking into it now.

@wsfuller Thanks for your interest in Fluent UI, and sorry for the confusion with the documentation! We're currently in the process of renaming our main package from office-ui-fabric-react to @fluentui/react, and the old name is still used in some places including the examples. I made an issue #13125 to track fixing that.

[ecraig12345]

@dzearing just checked in a fix, which should be released in an hour or so.

[dzearing]

We've resolved this immediately by moving latest back to 7.111.0 while publishing job is running. A misconfigured tsconfig path ended up stripping some exports. Apologize for the inconvenience and thank you for letting us know! You should be able to use 7.111.0 without problem, and we've deprecated the bad release.

[msft-github-bot]

:tada:This issue was addressed in #13127, which has now been successfully released as @fluentui/[email protected].:tada:

Handy links:

• Release Notes
• Official NPM Release