title: React Flow showing Cannot resolve module error for create-react-app
body: <p>Good day.</p>
  
  <p>I am trying to setup React with Flow for type checking but I can't seem to be having any luck so far. I can't really find an answer anywhere as of yet.</p>
  
  <p>I followed the Flow installation instructions:
  I installed flow using <code>npm i flow-bin</code>, then ran <code>npm run flow init</code> which will create a <code>.flowconfig</code> file and I am using create-react-app so according to the documentation that was it. </p>
  
  <p>In the <code>.flowconfig</code> under [options] i set all to <code>all=true</code> for Flow to check every file, and excluded files under the <code>node_modules</code> folder since there are about more than 45500 files in there and I want to only type check files under <code>/src</code>, therefore my <code>.flowconfig</code> file is like this:</p>
  
  <pre><code>[ignore]
  .*/node_modules/.*
  
  [include]
  .*/src/.*
  
  [libs]
  
  [lints]
  
  [options]
  all=true
  
  [strict]
  
  </code></pre>
  
  <p>Then on my component i have:</p>
  
  <pre><code>import React from "react";
  import "./Languagecurrency.scss";
  import { Modal } from "antd";
  import { useStoreActions, useStoreState } from "easy-peasy";
  
  </code></pre>
  
  <p>Then when i run npm run flow, i get  the following errors:</p>
  
  <pre><code>Error ----------------------------------src/components/Button/Button.js:3:8
  
  Cannot resolve module ./Button.scss.
  
       1| 
       2| import * as React from "react";
       3| import "./Button.scss";
       4| import { Modal } from "antd";
       5| import { useStoreActions, useStoreState } from "easy-peasy";
       6|
       7| type Props = {
  
  Error ----------------------------------src/components/Button/Button.js:4:8
  
  Cannot resolve module antd.
  
       1| 
       2| import * as React from "react";
       3| import "./Button.scss";
       4| import { Modal } from "antd";
       5| import { useStoreActions, useStoreState } from "easy-peasy";
       6|
       7| type Props = {
  
  Error ----------------------------------src/components/Button/Button.js:5:8
  
  Cannot resolve module easy-peasy.
  
       1| 
       2| import * as React from "react";
       3| import "./Button.scss";
       4| import { Modal } from "antd";
       5| import { useStoreActions, useStoreState } from "easy-peasy";
       6|
       7| type Props = {
  
  </code></pre>
  
  <p>Please help</p>
  
  <p>Thank you in advance</p>
  
  <p>These are all the errors i get</p>
  
  <pre><code>Error ----------------------------------------------------------------------------------- scripts/class_component.js:3:8
  
  Cannot resolve module ./comp_name.scss.
  
       1| 
       2| import * as React from "react";
       3| import './comp_name.scss';
       4|
       5| class comp_name extends React.Component&lt;{}&gt; {
       6|   state = {};
  
  
  Error ---------------------------------------------------------------------------------- scripts/class_component.js:6:11
  
  Cannot extend React.Component [1] with comp_name because object literal [2] is incompatible with undefined [3] in
  property state.
  
       scripts/class_component.js
        3| import './comp_name.scss';
        4|
   [1]  5| class comp_name extends React.Component&lt;{}&gt; {
   [2]  6|   state = {};
        7|   render() {
        8|     return &lt;&gt;comp_name component&lt;/&gt;;
        9|   }
  
       ../../../../AppData/Local/Temp/flow/flowlib_1c6c9ec/react.js
   [3] 26| declare class React$Component&lt;Props, State = void&gt; {
  
  
  Error ---------------------------------------------------------------------------------- scripts/component_index.js:1:25
  
  Cannot resolve module ./comp_name.
  
       1| export { default } from "./comp_name";
       2|
  
  
  Error ------------------------------------------------------------------------------ scripts/functional_component.js:3:8
  
  Cannot resolve module ./comp_name.scss.
  
       1| 
       2| import * as React from "react";
       3| import './comp_name.scss';
       4|
       5| const comp_name = () =&gt; {
       6|   return &lt;&gt;comp_name component&lt;/&gt;;
  
  
  Error ----------------------------------------------------------------------------------- scripts/system_routes.js:26:11
  
  Cannot resolve name result.
  
       23|       };
       24|       clean.forEach(val =&gt; {
       25|         if (val.includes("path")) {
       26|           result = val.split("=");
       27|           data.path = result[1].replace(/"/g, "");
       28|         }
       29|         if (val.includes("component")) {
  
  
  Error ----------------------------------------------------------------------------------- scripts/system_routes.js:30:11
  
  Cannot resolve name result.
  
       27|           data.path = result[1].replace(/"/g, "");
       28|         }
       29|         if (val.includes("component")) {
       30|           result = val.split("=");
       31|           data.component = result[1].replace(/{|}/g, "");
       32|         }
       33|       });
  
  
  Error ----------------------------------------------------------------------------------- scripts/system_routes.js:38:17
  
  Could not decide which case to select, since case 2 [1] may work but if it doesn't case 3 [2] looks promising too. To
  fix add a type annotation to unknown element type of empty array [3].
  
          scripts/system_routes.js
      [3]  14|   let routes = [];
             :
           35|     }
           36|   });
           37|
           38|   console.table(routes)
           39| } catch (err) {
           40|   console.error(err);
           41| }
  
          ../../../../AppData/Local/Temp/flow/flowlib_1c6c9ec/core.js
   [1][2] 928|     table(tabularData: { [key: string]: any, ... } | Array&lt;{ [key: string]: any, ... }&gt; | Array&lt;Array&lt;any&gt;&gt;): void,
  
  
  Error --------------------------------------------------------------------------------------------------- src/App.js:2:8
  
  Cannot resolve module ./App.scss.
  
       1| import React, { useEffect, useState } from "react";
       2| import "./App.scss";
       3| import { Switch, Route } from "react-router-dom";
       4|
       5| /** Pages **/
  
  
  Error -------------------------------------------------------------------------------------------------- src/App.js:3:31
  
  Cannot resolve module react-router-dom.
  
       1| import React, { useEffect, useState } from "react";
       2| import "./App.scss";
       3| import { Switch, Route } from "react-router-dom";
       4|
       5| /** Pages **/
       6| import Home from "./pages/landing-pages/home/Home";
  
  
  Error ------------------------------------------------------------------------------------------------- src/App.js:17:31
  
  Cannot resolve module easy-peasy.
  
       14| import Dateselection from "./pages/landing-pages/dateselection/Dateselection";
       15| import Daterangeselection from "./pages/landing-pages/daterangeselection/Daterangeselection";
       16| import Productselection from "./pages/landing-pages/product-selection/Productselection";
       17| import { useStoreState } from "easy-peasy";
       18|
       19| function App() {
       20|   const [loggedIn, setLoggedIn] = useState(
  
  
  Error --------------------------------------------------------------------------------------------- src/App.test.js:2:24
  
  Cannot resolve module @testing-library/react.
  
       1| import React from 'react';
       2| import { render } from '@testing-library/react';
       3| import App from './App';
       4|
       5| test('renders learn react link', () =&gt; {
  
  
  Error ---------------------------------------------------------------------------------------------- src/App.test.js:5:1
  
  Cannot resolve name test.
  
       2| import { render } from '@testing-library/react';
       3| import App from './App';
       4|
       5| test('renders learn react link', () =&gt; {
       6|   const { getByText } = render(&lt;App /&gt;);
       7|   const linkElement = getByText(/learn react/i);
       8|   expect(linkElement).toBeInTheDocument();
  
  
  Error ---------------------------------------------------------------------------------------------- src/App.test.js:8:3
  
  Cannot resolve name expect.
  
        5| test('renders learn react link', () =&gt; {
        6|   const { getByText } = render(&lt;App /&gt;);
        7|   const linkElement = getByText(/learn react/i);
        8|   expect(linkElement).toBeInTheDocument();
        9| });
       10|
  
  
  Error ------------------------------------------------------------------------------ src/components/Button/Button.js:3:8
  
  Cannot resolve module ./Button.scss.
  
       1| 
       2| import * as React from "react";
       3| import "./Button.scss";
       4| import Icons from "../Icons";
       5|
       6| type Props = {
  
  
  Error -------------------------------------------------------------------------- src/components/Checkbox/Checkbox.js:2:8
  
  Cannot resolve module ./Checkbox.scss.
  
       1| import React from "react";
       2| import "./Checkbox.scss";
       3| import { useState } from "react";
       4|
       5| const Checkbox = (props) =&gt; {
  
  
  Error ------------------------------------------------------------------------- src/components/Checkbox/Checkbox.js:5:19
  
  Missing type annotation for props.
  
       2| import "./Checkbox.scss";
       3| import { useState } from "react";
       4|
       5| const Checkbox = (props) =&gt; {
       6|   const { children, type, checked, value, styles, onChange, name, id } = props;
       7|   const [state, setState] = useState(checked);
       8|
  
  
  Error ----------------------------------------------------------------- src/components/CustomSelect/CustomSelect.js:2:20
  
  Cannot resolve module react-select.
  
       1| import React from "react";
       2| import Select from "react-select";
       3|
       4| const CustomSelect = ({
       5|   onChange,
  
  
  Error ----------------------------------------------------------------- src/components/CustomSelect/CustomSelect.js:4:23
  
  Missing type annotation for destructuring.
  
        1| import React from "react";
        2| import Select from "react-select";
        3|
        4| const CustomSelect = ({
        5|   onChange,
        6|   onInputChange,
        7|   name,
        8|   placeholder,
        9|   value,
       10|   options,
       11| }) =&gt; {
       12|   const dot = (color = "#bed523") =&gt; ({
       13|     alignItems: "center",
       14|     display: "flex",
  
  
  Error ------------------------------------------------------------------------------ src/components/Drawer/Drawer.js:2:8
  
  Cannot resolve module ./Drawer.scss.
  
       1| import React from "react";
       2| import "./Drawer.scss";
       3| import { Drawer } from "antd";
       4| import "antd/dist/antd.css";
       5| import { Link } from "react-router-dom";
  
  
  Error ----------------------------------------------------------------------------- src/components/Drawer/Drawer.js:3:24
  
  Cannot resolve module antd.
  
       1| import React from "react";
       2| import "./Drawer.scss";
       3| import { Drawer } from "antd";
       4| import "antd/dist/antd.css";
       5| import { Link } from "react-router-dom";
       6| import Icons from "../Icons";
  
  
  Error ------------------------------------------------------------------------------ src/components/Drawer/Drawer.js:4:8
  
  Cannot resolve module antd/dist/antd.css.
  
       1| import React from "react";
       2| import "./Drawer.scss";
       3| import { Drawer } from "antd";
       4| import "antd/dist/antd.css";
       5| import { Link } from "react-router-dom";
       6| import Icons from "../Icons";
       7| import { useStoreActions } from "easy-peasy";
  
  
  Error ----------------------------------------------------------------------------- src/components/Drawer/Drawer.js:5:22
  
  Cannot resolve module react-router-dom.
  
       2| import "./Drawer.scss";
       3| import { Drawer } from "antd";
       4| import "antd/dist/antd.css";
       5| import { Link } from "react-router-dom";
       6| import Icons from "../Icons";
       7| import { useStoreActions } from "easy-peasy";
       8|
  
  
  Error ----------------------------------------------------------------------------- src/components/Drawer/Drawer.js:7:33
  
  Cannot resolve module easy-peasy.
  
        4| import "antd/dist/antd.css";
        5| import { Link } from "react-router-dom";
        6| import Icons from "../Icons";
        7| import { useStoreActions } from "easy-peasy";
        8|
        9| const Customdrawer = ({ openDrawer, onCloseDrawer }) =&gt; {
       10|   const makeChange = useStoreActions((actions) =&gt; actions.System.makeChange);
  
  
  Error ----------------------------------------------------------------------------- src/components/Drawer/Drawer.js:9:23
  
  Missing type annotation for destructuring.
  
        6| import Icons from "../Icons";
        7| import { useStoreActions } from "easy-peasy";
        8|
        9| const Customdrawer = ({ openDrawer, onCloseDrawer }) =&gt; {
       10|   const makeChange = useStoreActions((actions) =&gt; actions.System.makeChange);
       11|
       12|   const langCurr = () =&gt; {
  
  
  Error ------------------------------------------------------------------------- src/components/Dropdown/Dropdown.js:2:43
  
  Cannot resolve module react-bootstrap.
  
       1| import React from "react";
       2| import { Dropdown as ReactDropdown } from "react-bootstrap";
       3| import { Link } from "react-router-dom";
       4| import "./Dropdown.scss";
       5| import Checkbox from "../Checkbox";
  
  
  Error ------------------------------------------------------------------------- src/components/Dropdown/Dropdown.js:3:22
  
  Cannot resolve module react-router-dom.
  
       1| import React from "react";
       2| import { Dropdown as ReactDropdown } from "react-bootstrap";
       3| import { Link } from "react-router-dom";
       4| import "./Dropdown.scss";
       5| import Checkbox from "../Checkbox";
       6| import Icons from "../Icons";
  
  
  Error -------------------------------------------------------------------------- src/components/Dropdown/Dropdown.js:4:8
  
  Cannot resolve module ./Dropdown.scss.
  
       1| import React from "react";
       2| import { Dropdown as ReactDropdown } from "react-bootstrap";
       3| import { Link } from "react-router-dom";
       4| import "./Dropdown.scss";
       5| import Checkbox from "../Checkbox";
       6| import Icons from "../Icons";
       7|
  
  
  Error ------------------------------------------------------------------------- src/components/Dropdown/Dropdown.js:8:19
  
  Missing type annotation for destructuring.
  
        5| import Checkbox from "../Checkbox";
        6| import Icons from "../Icons";
        7|
        8| const Dropdown = ({ links, onCheckbox }) =&gt; {
        9|   const CustomToggle = React.forwardRef(({ children, onClick }, ref) =&gt; (
       10|     &lt;button
       11|       type="button"
  
  
  Error ---------------------------------------------------------------------- src/components/Fatalerror/Fatalerror.js:2:8
  
  Cannot resolve module ./Fatalerror.scss.
  
       1| import React from "react";
       2| import './Fatalerror.scss';
       3| import fatal_error from '../../assets/images/fatal-error.png'
       4|
       5| const Fatalerror = ({onReload}) =&gt; {
  
  
  Error --------------------------------------------------------------------- src/components/Fatalerror/Fatalerror.js:5:21
  
  Missing type annotation for destructuring.
  
       2| import './Fatalerror.scss';
       3| import fatal_error from '../../assets/images/fatal-error.png'
       4|
       5| const Fatalerror = ({onReload}) =&gt; {
       6|   return &lt;&gt;
       7|   &lt;div className="fatal-error-container"&gt;
       8|     &lt;div className="fatal-error-image"&gt;
  
  
  Error ------------------------------------------------------------------------------ src/components/Footer/Footer.js:2:8
  
  Cannot resolve module ./Footer.scss.
  
       1| import React from "react";
       2| import "./Footer.scss";
       3| import logo from "../../assets/images/esim2go_logo.svg";
       4|
       5| const Footer = () =&gt; {
  
  
  Error ------------------------------------------------------------------------------ src/components/Header/Header.js:2:8
  
  Cannot resolve module ./Header.scss.
  
       1| import React, { useState } from "react";
       2| import "./Header.scss";
       3| import logo from "../../assets/images/esim2go_logo.svg";
       4| import notification_icon from "../../assets/images/notification_icon.svg";
       5| import { Link } from "react-router-dom";
  
  
  Error ----------------------------------------------------------------------------- src/components/Header/Header.js:5:22
  
  Cannot resolve module react-router-dom.
  
       2| import "./Header.scss";
       3| import logo from "../../assets/images/esim2go_logo.svg";
       4| import notification_icon from "../../assets/images/notification_icon.svg";
       5| import { Link } from "react-router-dom";
       6| import ReactCountryFlag from "react-country-flag";
       7| import Icons from "../Icons";
       8| import Drawer from "../Drawer";
  
  
  Error ----------------------------------------------------------------------------- src/components/Header/Header.js:6:30
  
  Cannot resolve module react-country-flag.
  
       3| import logo from "../../assets/images/esim2go_logo.svg";
       4| import notification_icon from "../../assets/images/notification_icon.svg";
       5| import { Link } from "react-router-dom";
       6| import ReactCountryFlag from "react-country-flag";
       7| import Icons from "../Icons";
       8| import Drawer from "../Drawer";
       9| import Languagecurrency from "../modals/language-currency/Languagecurrency";
  
  
  Error ---------------------------------------------------------------------------- src/components/Header/Header.js:10:33
  
  Cannot resolve module easy-peasy.
  
        7| import Icons from "../Icons";
        8| import Drawer from "../Drawer";
        9| import Languagecurrency from "../modals/language-currency/Languagecurrency";
       10| import { useStoreActions } from "easy-peasy";
       11|
       12| const Header = () =&gt; {
       13|   const [searchOpen, setSearchOpen] = useState(false);
  
  
  Error ---------------------------------------------------------------------------- src/components/Header/Header.js:34:17
  
  Cannot call searchInput.focus because property focus is missing in null [1].
  
       src/components/Header/Header.js
         31|
         32|   const searchInputFocus = () =&gt; {
         33|     const searchInput = document.getElementById("global-search");
         34|     searchInput.focus();
         35|   };
         36|
         37|   const langCurr = () =&gt; {
  
       ../../../../AppData/Local/Temp/flow/flowlib_1c6c9ec/dom.js
   [1] 1250|   getElementById(elementId: string): HTMLElement | null;
  
  
  Error ------------------------------------------------------------------------------- src/components/Icons/Check.js:3:16
  
  Missing type annotation for destructuring.
  
       1| import React from "react";
       2|
       3| const Check = ({ height = 24, width = 24 }) =&gt; (
       4|   &lt;svg
       5|     xmlns="http://www.w3.org/2000/svg"
       6|     height={height}
  
  
  Error ------------------------------------------------------------------------------- src/components/Icons/Icons.js:7:16
  
  Missing type annotation for destructuring.
  
        4| import Check from "./Check";
        5| import Spinner from "./Spinner";
        6|
        7| const Icons = ({ icon, className = "" }) =&gt; {
        8|
        9|   const container = (icon) =&gt; {
       10|     let svg = "";
  
  
  Error -------------------------------------------------------------------------------- src/components/Input/Input.js:2:8
  
  Cannot resolve module ./Input.scss.
  
       1| import React from "react";
       2| import "./Input.scss";
       3|
       4| const Input = ({
       5|   type = "text",
  
  
  Error ------------------------------------------------------------------------------- src/components/Input/Input.js:4:16
  
  Missing type annotation for destructuring.
  
        1| import React from "react";
        2| import "./Input.scss";
        3|
        4| const Input = ({
        5|   type = "text",
        6|   name = "",
        7|   className,
        8|   placeholder = "",
        9|   id = "",
       10|   onKeyUp,
       11|   onChange,
       12| }) =&gt; {
       13|   const keyUp = (e) =&gt; {
       14|     const target = e.target
       15|     if (target.value.trim().length !== 0) {
  
  
  Error ------------------------------------------------------------------ src/components/Notification/Notification.js:2:8
  
  Cannot resolve module ./Notification.scss.
  
       1| import React from "react";
       2| import "./Notification.scss";
       3| import { notification } from "antd";
       4|
       5| const Notification = (type, message, header = "") =&gt; {
  
  
  Error ----------------------------------------------------------------- src/components/Notification/Notification.js:3:30
  
  Cannot resolve module antd.
  
       1| import React from "react";
       2| import "./Notification.scss";
       3| import { notification } from "antd";
       4|
       5| const Notification = (type, message, header = "") =&gt; {
       6|   notification[type]({
  
  
  Error ----------------------------------------------------------------- src/components/Notification/Notification.js:5:23
  
  Missing type annotation for type.
  
       2| import "./Notification.scss";
       3| import { notification } from "antd";
       4|
       5| const Notification = (type, message, header = "") =&gt; {
       6|   notification[type]({
       7|     top: 62,
       8|     message: header !== "" ? header : null,
  
  
  Error ----------------------------------------------------------------- src/components/Notification/Notification.js:5:29
  
  Missing type annotation for message.
  
       2| import "./Notification.scss";
       3| import { notification } from "antd";
       4|
       5| const Notification = (type, message, header = "") =&gt; {
       6|   notification[type]({
       7|     top: 62,
       8|     message: header !== "" ? header : null,
  
  
  Error ----------------------------------------------------------------- src/components/Notification/Notification.js:5:38
  
  Missing type annotation for header.
  
       2| import "./Notification.scss";
       3| import { notification } from "antd";
       4|
       5| const Notification = (type, message, header = "") =&gt; {
       6|   notification[type]({
       7|     top: 62,
       8|     message: header !== "" ? header : null,
  
  
  Error ------------------------------------------------------------------------ src/components/PageStage/PageStage.js:2:8
  
  Cannot resolve module ./PageStage.scss.
  
       1| import React from "react";
       2| import './PageStage.scss';
       3|
       4| const PageStage = ({ stage }) =&gt; {
       5|   return (
  
  
  Error ----------------------------------------------------------------------- src/components/PageStage/PageStage.js:4:20
  
  Missing type annotation for destructuring.
  
       1| import React from "react";
       2| import './PageStage.scss';
       3|
       4| const PageStage = ({ stage }) =&gt; {
       5|   return (
       6|     &lt;&gt;
       7|       &lt;div className="page-stage"&gt;
  
  
  Error -------------------------------------------------------------- src/components/ProductPackage/ProductPackage.js:2:8
  
  Cannot resolve module ./ProductPackage.scss.
  
       1| import React, { useState } from "react";
       2| import "./ProductPackage.scss";
       3| import ReactCountryFlag from "react-country-flag";
       4| import Packagemoreinfo from "../modals/package-moreinfo/Packagemoreinfo";
       5|
  
  
  Error ------------------------------------------------------------- src/components/ProductPackage/ProductPackage.js:3:30
  
  Cannot resolve module react-country-flag.
  
       1| import React, { useState } from "react";
       2| import "./ProductPackage.scss";
       3| import ReactCountryFlag from "react-country-flag";
       4| import Packagemoreinfo from "../modals/package-moreinfo/Packagemoreinfo";
       5|
       6| const ProductPackage = ({ data }) =&gt; {
  
  
  Error ------------------------------------------------------------- src/components/ProductPackage/ProductPackage.js:6:25
  
  Missing type annotation for destructuring.
  
       3| import ReactCountryFlag from "react-country-flag";
       4| import Packagemoreinfo from "../modals/package-moreinfo/Packagemoreinfo";
       5|
       6| const ProductPackage = ({ data }) =&gt; {
       7|   const [open, setOpen] = useState(false);
       8|
       9|   const showModal = () =&gt; {
  
  </code></pre>