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

Question

尝试开始使用 Microsoft 的 Fluent UI，但由于某些原因，我收到错误消息，提示每个组件都未从库中导出。

紧随 "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;

以下是我在每次导入时遇到的错误：

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

适用于预期的 linter 警告。我非常困惑，为什么入门要从 @fluentui/react 导入，而文档却说要从 office-ui-fabric-react

所以我的问题是：

为什么 import { PrimaryButton } from '@fluentui/react' 不起作用，而 import { PrimaryButton } from 'office-ui-fabric-react'; 起作用？
是否缺少全局安装？
当所有入门模板都使用 office-ui-fabric-react 版本作为依赖项时，为什么入门要安装 @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 中打开了一个问题：https://github.com/microsoft/fluentui/issues/13105

当我还原时它似乎起作用了。

Answer 2

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

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

Answer 3

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

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

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

office-ui-fabric

office-ui-fabric-react

Package.json

App.js