CODEWITHSUNDEEP
javascriptreactjsflowtypetypechecking
program_bumble_bee
program_bumble_bee

Reputation: 305

Unable to resolve react-bootstrap modules flow error

I am setting up flow static type checking for my react project (pretty new to it). I also installed react UI library, React-Bootstrap.

This is how my current setup is:

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

There are 2 issues to my code that are related to flow:

Issue 1. As I try to import the required react-bootstrap modules into my .js file, flow is throwing errors:

Following are the errors I receive on the react-bootstrap modules I've imported in my App.js file:

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

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

and more...

Issue 2. 'import type' declarations can only be used in TypeScript files.

The statement import type { Node } from 'react'; throws this error. I am unable to use flow-type for my functional components. I've all the proper VS-CODE settings to enable type-checking for .js files:

enter image description here

I tried to look around for the issues, but being new to using flow, I am stuck a bit. Any help to resolve the same (with some justification), would be really appreciated.

Thanks in advance!

Upvotes: 1

Views: 739

Answers (2)

Brianzchen
Brianzchen

Reputation: 1345

Your issue is that you have flow setup to ignore all code from node_modules, see your .flowconfig line of code that goes .*/node_modules/.*.

This isn't necessarily wrong, it's what I would have done also but what that means is that when you try to import from react-boostrap flow will tell you it doesn't exist (hence cannot-resolve-module). But the reason people do this is because they want to improve flow's parsing speed with less modules to parse because their flow resolutions instead come from flow-typed (https://flow-typed.github.io/flow-typed/#/).

If you follow the docs you've eventually be told to run flow-typed install which will install definitions for libraries you have installed in your package.json, one of those will be react-bootstrap though important to note that it will be a stubbed package because it hasn't been typed by anyone in the community (you could be that person though) but it will solve your problems in the way your expect.

Upvotes: 1

Jagadish Shrestha
Jagadish Shrestha

Reputation: 310

I am not sure why you are importing Node from react but you can import like this

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

Upvotes: 0

Related Questions