Добрый день.
Я пытаюсь настроить React с Flow для проверки типов, но пока мне не кажется, что мне повезло. Я пока не могу найти ответ где-либо еще.
Я следовал инструкциям по установке Flow: я установил поток, используя npm i flow-bin, затем запустил npm run flow init, который создаст файл .flowconfig, и я используя create-реагировать на приложение так, в соответствии с документацией, которая была.
В .flowconfig в [опции] я установил все на all=true для Flow, чтобы проверять каждый файл, и исключил файлы в папке node_modules, так как там более 45500 файлов, и я Я хочу набирать только контрольные файлы в /src, поэтому мой .flowconfig файл выглядит так:
[ignore]
.*/node_modules/.*
[include]
.*/src/.*
[libs]
[lints]
[options]
all=true
[strict]
Тогда на моем компоненте у меня есть:
import React from "react";
import "./Languagecurrency.scss";
import { Modal } from "antd";
import { useStoreActions, useStoreState } from "easy-peasy";
Затем, когда я запускаю npm запустить поток, я получаю следующие ошибки:
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 = {
Пожалуйста, помогите
Заранее спасибо
Это все ошибки, которые я получаю
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<{}> {
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<{}> {
[2] 6| state = {};
7| render() {
8| return <>comp_name component</>;
9| }
../../../../AppData/Local/Temp/flow/flowlib_1c6c9ec/react.js
[3] 26| declare class React$Component<Props, State = void> {
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 = () => {
6| return <>comp_name component</>;
Error ----------------------------------------------------------------------------------- scripts/system_routes.js:26:11
Cannot resolve name result.
23| };
24| clean.forEach(val => {
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<{ [key: string]: any, ... }> | Array<Array<any>>): 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', () => {
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', () => {
6| const { getByText } = render(<App />);
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', () => {
6| const { getByText } = render(<App />);
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) => {
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) => {
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| }) => {
12| const dot = (color = "#bed523") => ({
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 }) => {
10| const makeChange = useStoreActions((actions) => 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 }) => {
10| const makeChange = useStoreActions((actions) => actions.System.makeChange);
11|
12| const langCurr = () => {
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 }) => {
9| const CustomToggle = React.forwardRef(({ children, onClick }, ref) => (
10| <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}) => {
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}) => {
6| return <>
7| <div className="fatal-error-container">
8| <div className="fatal-error-image">
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 = () => {
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 = () => {
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 = () => {
33| const searchInput = document.getElementById("global-search");
34| searchInput.focus();
35| };
36|
37| const langCurr = () => {
../../../../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 }) => (
4| <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 = "" }) => {
8|
9| const container = (icon) => {
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| }) => {
13| const keyUp = (e) => {
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 = "") => {
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 = "") => {
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 = "") => {
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 = "") => {
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 = "") => {
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 }) => {
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 }) => {
5| return (
6| <>
7| <div className="page-stage">
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 }) => {
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 }) => {
7| const [open, setOpen] = useState(false);
8|
9| const showModal = () => {