使用“@fluentui/react”的组件导出错误，但适用于“office-ui-fabric-react”

Question

尝试开始使用 Microsoft 的 Fluent UI，但由于某种原因，我收到了错误，即没有从库中导出每个组件。

跟随“开始”

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

包.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.

5. 适用于预期的 linter 警告。我非常困惑为什么 Get Started 是从 @fluentui/react 导入的，而文档说要从 office-ui-fabric-react 导入与之相矛盾

所以我的问题是：

1. 为什么import { PrimaryButton } from '@fluentui/react' 不起作用，而import { PrimaryButton } from 'office-ui-fabric-react'; 起作用？
2. 我是否缺少全局安装？
3. 为什么当所有入门模板都使用 office-ui-fabric-react 的版本作为依赖项时，Get Started 安装 @fluentui/react？

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

Answer 1

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

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

当我恢复它时，它似乎工作了。

Answer 2

此问题源于已解决的错误版本。当前的工作版本是7.113.0，如GitHub Issue 所述（感谢@onzur 发布）。

Answer 3

我已尝试使用 7.111.0 版本，它工作正常。你可以在这里查看： https://stackblitz.com/edit/fluent-ui-react-demo?file=index.js

我认为问题在于昨天发布的 v7.111.1。