无法解决 react-bootstrap 模块流错误

Question

我正在为我的 react 项目设置流静态类型检查（对它来说很新）。我还安装了 react UI 库，React-Bootstrap。

这是我当前的设置：

.flowconfig

[ignore]
.*/build/.*
.*/node_modules/.*
.*/node_modules/npm.*
.*/node_modules/.*/node_modules/.*
.*\.test\.js


[include]
./src 

[libs]

[lints]

[options]
react.runtime=automatic

[strict]

App.js

//@flow

import React, { useState } from 'react';

import Container from 'react-bootstrap/Container';
import Button from 'react-bootstrap/Button';
import Alert from 'react-bootstrap/Alert';

import type { Node } from 'react';

const AlertDismissibleExample = (): Node => {
  const [show, setShow] = useState(false);

  if (show) {
    return (
      <Alert variant="danger" onClose={() => setShow(false)} dismissible>
        <Alert.Heading>
          I am an alert of type <span className="dangerText">danger</span>! But
          my color is Teal!
        </Alert.Heading>
        <p>
          By the way the button you just clicked is an{' '}
          <span className="infoText">Info</span> button but is using the color
          Tomato. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          Accusantium debitis deleniti distinctio impedit officia reprehenderit
          suscipit voluptatibus. Earum, nam necessitatibus!
        </p>
      </Alert>
    );
  }
  return (
    <Button variant="info" onClick={() => setShow(true)}>
      Show Custom Styled Alert
    </Button>
  );
}

const App = () => (
  <Container className="p-3">
    <Container className="pb-1 p-5 mb-4 bg-light rounded-3">
      <h1 className="header">Welcome To React-Bootstrap</h1>
      <AlertDismissibleExample />
    </Container>
  </Container>
);

export default App;

我的代码有 2 个与流程相关的问题：

问题 1. 当我尝试将所需的 react-bootstrap 模块导入我的 .js 文件时，流程抛出错误：

以下是我在 App.js 文件中导入的 react-bootstrap 模块收到的错误：

Cannot resolve module `react-bootstrap/Container`.Flow(cannot-resolve-module)

Cannot resolve module `react-bootstrap/Button`.Flow(cannot-resolve-module)

还有更多...

---

问题 2. 'import type' 声明只能在 TypeScript 文件中使用。

import type { Node } from 'react'; 语句会引发此错误。我无法为我的功能组件使用流类型。我有所有正确的 VS-CODE 设置来启用 .js 文件的类型检查：

我试图四处寻找问题，但是对于使用流程的新手，我有点卡住了。任何解决相同问题的帮助（有一些理由），将不胜感激。

提前致谢！

Answer 1

您的问题是您的流程设置忽略了来自node_modules 的所有代码，请参阅您的.flowconfig 代码行.*/node_modules/.*。

这不一定是错误的，这也是我会做的，但这意味着当你尝试从react-boostrap 导入时，流会告诉你它不存在（因此cannot-resolve-module）。但人们这样做的原因是因为他们想用更少的模块来提高流的解析速度，因为他们的流解析来自flow-typed (https://flow-typed.github.io/flow-typed/#/)。

如果您遵循文档，您最终会被告知运行 flow-typed install，它将为您在 package.json 中安装的库安装定义，其中之一将是 react-bootstrap，但重要的是要注意它将是一个存根包，因为它没有被社区中的任何人输入（尽管您可能是那个人），但它会以您期望的方式解决您的问题。

Answer 2

我不确定你为什么要从 react 导入 Node，但你可以像这样导入

import { Container, Alert, Button } from "react-bootstrap";