组件导出错误使用“@fluentui/react”，但与“office-ui-fabric-react”一起工作

Question

试图开始使用Microsoft的Fluent UI，但由于某些原因，我发现每个组件都不是从库导出的错误。

跟随“开始”

• 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;

下面是我在跟踪每个不同导入时遇到的错误：

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. 使用预期的linter警告。我非常困惑为什么入门程序是从@fluentui/react导入的，而文档通过说要从office-ui-fabric-react导入而与此相矛盾

所以我的问题是：

1. 为什么import { PrimaryButton } from '@fluentui/react'不工作，但import { PrimaryButton } from 'office-ui-fabric-react';工作呢？
2. 我有没有漏掉的全球安装？
3. 当所有初学者模板都使用@fluentui/react的一个版本作为依赖项时，Get开始安装office-ui-fabric-react的原因何在？

看起来，执行yarn add office-ui-fabric-react也会安装"office-ui-fabric-react": "^7.111.1"。所以我很好奇这是不是更正确的方法？

Answer 1

这个问题源于一个糟糕的版本，而这个版本已经解决了。当前的工作版本是7.113.0，如GitHub问题中所述(感谢您@onzur发布这篇文章)。

Answer 2

看上去是最新版本的问题。尝试使用7.110.5版本。您可以通过调用npm install @fluentui/react@7.110.5 --save来做到这一点。

我在github：https://github.com/microsoft/fluentui/issues/13105上开了一期

当我恢复过来的时候，它似乎起作用了。

Answer 3

我尝试了7.111.0版本，它运行良好。您可以在这里查看：https://stackblitz.com/edit/fluent-ui-react-demo?file=index.js

我认为问题在于昨天发布的7.111.1版本。