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;

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

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

使用预期的短绒警告。我非常困惑，为什么“入门指南”是从@fluentui/react导入的，而文档却相反地说是从office-ui-fabric-react导入

所以我的问题是：

为什么import { PrimaryButton } from '@fluentui/react'无效，但是import { PrimaryButton } from 'office-ui-fabric-react';无效？
我是否缺少全局安装？
当所有入门模板都使用@fluentui/react的版本作为依赖时，为什么要开始安装office-ui-fabric-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

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

Answer 3

我尝试使用7.111.0版本，并且工作正常。您可以在此处查看： https://stackblitz.com/edit/fluent-ui-react-demo?file=index.js

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

使用'@ fluentui / react'的组件导出错误，但与'office-ui-fabric-react'一起使用

Package.json

App.js

3 个答案: