Javascript 反应流显示无法解决创建反应应用程序的模块错误
你好 我试图设置React with Flow进行类型检查，但到目前为止我似乎没有任何运气。到目前为止，我在任何地方都找不到答案 我按照流程安装说明进行操作： 我使用Javascript 反应流显示无法解决创建反应应用程序的模块错误,javascript,reactjs,flowtype,Javascript,Reactjs,Flowtype,你好 我试图设置React with Flow进行类型检查，但到目前为止我似乎没有任何运气。到目前为止，我在任何地方都找不到答案 我按照流程安装说明进行操作： 我使用npm I flow bin安装了flow，然后运行了npm run flow init，它将创建一个.flowconfig文件，并且我正在使用create react app，以便根据创建它的文档进行操作 在[options]下的.flowconfig中，我将所有设置为all=true，以便Flow检查每个文件，并排除节点模块文件
npm I flow binnpm run flow init.flowconfig.flowconfigall=true节点模块/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";
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 = () => {
错误-------------------------------------------------------------------scripts/class_component.js:3:8
无法解析模块。/comp_name.scss。
1|
2 |从“React”导入*作为React；
3 |导入“/comp_name.scss”；
4|
5 |类组件名称扩展反应组件{
6 |州={}；
错误-------------------------------------------------------------------scripts/class_component.js:6:11
无法使用组件名称扩展React.Component[1]，因为对象文字[2]与中未定义的[3]不兼容
财产状态。
脚本/class_component.js
3 |导入“/comp_name.scss”；
4|
[1] 5 |类组件名称扩展反应组件{
[2] 6 |州={}；
7 | render（）{
8 |返回组件名称组件；
9| }
../../../AppData/Local/Temp/flow/flowlib_1c6c9ec/react.js
[3] 26 |声明类反应$Component{
错误-------------------------------------------------------------------scripts/component_index.js:1:25
无法解析模块/组件名称。
1 |从“/comp_name”导出{default}”；
2|
错误-------------------------------------------------------------------scripts/functional_component.js:3:8
无法解析模块。/comp_name.scss。
1|
2 |从“React”导入*作为React；
3 |导入“/comp_name.scss”；
4|
5 | const comp_name=（）=>{
6 |返回组件名称组件；
错误-------------------------------------------------------------------scripts/system\u routes.js:26:11
无法解析名称结果。
23| };
24 |干净。每小时（val=>{
25 |如果（值包括（“路径”））{
26 |结果=val.split（“=”）；
27 | data.path=结果[1]。替换（/“/g，”）；
28| }
29 |如果（价值包括（“成分”））{
错误-------------------------------------------------------------------scripts/system\u routes.js:30:11
无法解析名称结果。
27 | data.path=结果[1]。替换（/“/g，”）；
28| }
29 |如果（价值包括（“成分”））{
30 |结果=val.split（“=”）；
31 | data.component=结果[1]。替换（/{124;}/g，”）；
32| }
33| });
错误-------------------------------------------------------------------scripts/system\u routes.js:38:17
无法决定选择哪种情况，因为情况2[1]可能有效，但如果无效，情况3[2]看起来也很有希望。要
修复了向空数组[3]的未知元素类型添加类型批注的问题。
脚本/system_routes.js
[3] 14 |让路线=[]；
:
35| }
36| });
37|
38 |控制台表（路线）
39 |}捕捉（错误）{
40 |控制台错误（err）；
41| }
../../../AppData/Local/Temp/flow/flowlib_1c6c9ec/core.js
[1] [2]928 | table（tablerdata:{[key:string]：any，}| Array | Array）：void，
错误----------------------------------------------------------------------src/App.js:2:8
无法解析模块。/App.scss。
1 |从“React”导入React，{useffect，useState}；
2 |导入“/App.scss”；
3 |从“react router dom”导入{Switch，Route}；
4|
5 |/**页**/
错误--------------------------------------------------------------------src/App.js:3:31
无法解析模块响应路由器dom。
1 |从“React”导入React，{useffect，useState}；
2 |导入“/App.scss”；
3 |从“react router dom”导入{Switch，Route}；
4|
5 |/**页**/
6 |从“/pages/landing pages/Home/Home”导入主页；
错误-------------------------------------------------------------------src/App.js:17:31
无法轻松解决模块问题。
14 |从“/pages/landing pages/Dateselection/Dateselection”导入日期选择；
15 |从“/pages/landing pages/Daterangeselection/Daterangeselection”导入Daterangeselection；
16 |从“/页面/登录页/产品选择/产品选择”导入产品选择；
17 |从“easy peasy”导入{useStoreState}；
18|
19 |功能应用程序（）{
20 | const[loggedIn，setLoggedIn]=使用状态(
错误-------------------------------------------------------------------src/App.test.js:2:24
无法解析模块@testing library/react。
1 |从“React”导入React；
2 |从'@testing library/react'导入{render}；
3 |从“./App”导入应用程序；
4|
5 |测试（'呈现学习反应链接'，（）=>{
错误--------------------------------------------------------------------src/App.test.js:5:1
无法解析名称测试。
2 |从'@testing library/react'导入{render}；
3 |从“./App”导入应用程序；
4|
5 |测试（'rende