Search code examples
office-ui-fabricoffice-ui-fabric-react

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

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.

  1. 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?

Solution

  • 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).