Component export errors using '@fluentui/react', but works with 'office-ui-fabric-react'

Question

Trying to get started with Microsoft's Fluent UI, but for some reason I'm getting errors that every component is not exported from the library.

Following the "Get Started"

• npx create-react-app my-app
• cd my-app
• npm install @fluentui/react

Package.json

"dependencies": {
...
 "@fluentui/react": "^7.111.1", // Note: office-ui-fabric is NOT a specified dependency
...
}

App.js

import React from 'react';

// Here I have tried 5 ways of doing the import, the first 4 are errors

// #1, from https://developer.microsoft.com/en-us/fluentui#/get-started
import { PrimaryButton } from '@fluentui/react';

// #2,3,4 are from https://github.com/microsoft/fluentui#integrating-in-your-project
// #2
import { PrimaryButton } from '@fluentui/react/lib/Button';
// #3
import { PrimaryButton } from '@fluentui/react/lib-amd/Button';
// #4
import { PrimaryButton } from '@fluentui/react/lib-commonjs/Button';

// #5, works with ESLint errors that this package is not a specified dependency
import { PrimaryButton } from 'office-ui-fabric-react'

function App() {
  return (
    <div className="App">
      <PrimaryButton>I am a button.</PrimaryButton>
    </div>
  );
}

export default App;

Here are the errors I'm getting following each of the different imports:

1. ./src/App.js Attempted import error: 'PrimaryButton' is not exported from '@fluentui/react'.

2, 3, 4. Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

5. Works with an expected linter warning. I'm super confused why the Get Started is importing from @fluentui/react and the docs contradict that by saying to import from office-ui-fabric-react

So my questions are:

1. Why does import { PrimaryButton } from '@fluentui/react' not work, but import { PrimaryButton } from 'office-ui-fabric-react'; does?
2. Is there a global install I'm missing?
3. Why does the Get Started install @fluentui/react when all the starter templates use a version of office-ui-fabric-react as a dependency?

It also looks like doing yarn add office-ui-fabric-react will install "office-ui-fabric-react": "^7.111.1" . So I'm curious if that is the more correct approach?

Answer 1

Looks like an issue with the latest version. Try using version 7.110.5. You can do that by calling npm install @fluentui/react@7.110.5 --save

I opened an issue in github: https://github.com/microsoft/fluentui/issues/13105

When I reverted it seemed to work.

Answer 2

This issues stems from a bad release that has since been resolved. The current working version is 7.113.0 as stated in GitHub Issue (thank you @onzur for posting that).

Answer 3

I have tried with 7.111.0 version and it is working fine. You can check out here: https://stackblitz.com/edit/fluent-ui-react-demo?file=index.js

I think issue is with v7.111.1 which was released yesterday.