2

尝试开始使用 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
...
}

应用程序.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 警告。我非常困惑为什么 Get Started 是从导入的，@fluentui/react而文档通过说要从导入来反驳这一点office-ui-fabric-react

所以我的问题是：

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

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

4

3 回答 3

2

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

我在 github 中打开了一个问题：https ://github.com/microsoft/fluentui/issues/13105

当我恢复它似乎工作。

于 2020-05-12T05:37:53.947 回答
1

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

于 2020-05-13T14:42:31.247 回答
0

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

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

于 2020-05-12T17:59:06.357 回答