Create-React-App 编译失败 |导入/第一次错误

2023-11-23

我目前正在为我的个人网站使用 Create-React-App。每次运行时我都会收到以下错误:

./src/~/react-router-dom/es/index.js
 Line 3:   Import in body of module; reorder to top  import/first
 Line 5:   Import in body of module; reorder to top  import/first
 Line 7:   Import in body of module; reorder to top  import/first
 Line 9:   Import in body of module; reorder to top  import/first
 Line 11:  Import in body of module; reorder to top  import/first
 Line 13:  Import in body of module; reorder to top  import/first
 Line 15:  Import in body of module; reorder to top  import/first
 Line 17:  Import in body of module; reorder to top  import/first
 Line 19:  Import in body of module; reorder to top  import/first
 Line 21:  Import in body of module; reorder to top  import/first
 Line 23:  Import in body of module; reorder to top  import/first
 Line 25:  Import in body of module; reorder to top  import/first

我确实觉得我错过了一些非常小的东西,但我很难弄清楚。我尝试用谷歌搜索错误关键字“import/first”,这让我认为这是一个 ESLint 问题。如果您发现我的进口订单有任何问题,请告诉我。我尝试了不同的导入订单,但似乎没有什么可以消除该错误。

import React from 'react';
import ReactDOM from 'react-dom';
import { createBrowserHistory } from 'history';
import { Router, Route, Redirect, Switch } from 'react-router-dom';
import './index.css'; 
import App from './App.js';
import Home from './home.js';
import About from './about.js';
import Contact from './contact.js';
import NotFound from './404.js';

import registerServiceWorker from './registerServiceWorker';

const history = createBrowserHistory();

ReactDOM.render(
    <Router history={history}>
        <App>
            <Switch>
                <Route exact path="/" component= {Home} />
                <Route path="/about" component= {About} />
                <Route path="/contact" component= {Contact} />
                <Route path="/404" component= {NotFound} />
                <Redirect to= "/404" />
            </Switch>
        </App>
    </Router>,
    document.getElementById('root')
);
registerServiceWorker();

这是因为你不小心将 React Router 安装到了src文件夹。所以 linter 认为是your代码并尝试验证它。不要在里面安装第三方依赖src.

Delete src/node_modules并运行npm install在您的应用程序的根文件夹中。如果缺少某些包,请运行npm install --save <package-name>, 也在根文件夹中.

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Create-React-App 编译失败 |导入/第一次错误 的相关文章

  • 过滤嵌套的 JSON 对象

    我有一个搜索栏 您可以在其中输入员工姓名 它应该根据过滤器返回姓名 我有一个嵌套的 JSON 对象 如下所示 我需要深入了解该对象以访问数组中的员工姓名 您可以看到我尝试实现的多个选项 它们已被注释掉 我的问题是代码没有过滤名称并返回所有名
  • 如何在ReactJS中定义常量

    我有一个将文本映射到字母的函数 sizeToLetterMap function return small square s large square q thumbnail t small 240 m small 320 n medium
  • React 组件等待所需的 props 渲染

    我正在父组件内部声明一个组件 我想在一个文件中建立特定的道具 然后在父组件中 我希望能够同时为子组件建立其他道具 因为它们是共享属性 在大多数情况下 我的问题是 子组件尝试渲染并失败 因为首先没有建立所需的道具类型 有没有办法告诉子组件等待
  • React 错误:目标容器不是 DOM 元素

    我刚刚开始使用 React 所以这可能是一个非常简单的错误 但我们开始吧 我的html代码非常简单 load staticfiles
  • React router v6 和路由内页面的相关链接

    您好 我正在尝试使用 React Router 将项目更新到 v6 我了解了基础知识 但在相关链接方面遇到了困难 我们有一个页面 通过 id 呈现给定项目的参考文档 该文档可以使用同级 ID 链接到其他 同级 材料 换句话说 用户可以在文档
  • React中如何触发同级组件的函数?

    I am new to front end world and could not figure out how to trigger a function from a sibling component Lets say I have
  • 更改所选元素的颜色 - React

    我是反应新手 我试图更改所选的一个特定 li 的颜色 但它会更改所有 li 的颜色 此外 当单击另一个 li 时 我希望第一个 i 不再处于活动状态 这是代码 http codepen io polinaz pen zNJKqO http
  • Spyder 未检测到导入的 python 文件中的更改

    我正在使用 Spyder 3 2 4 Python 3 6 Spyder 不会检测导入的 python 文件中的更改 例如 测试2 py def func return 5 测试1 py import test2 a test2 func
  • React App 中的图像损坏

    我正在尝试访问 React 应用程序中的图像 当我运行代码时 我在网页上看到一个损坏的图像图标 我不确定我是否正在访问图像的正确路径 我的代码如下 import React Component from react class Header
  • 如何使用 next auth 通过自定义 Spring API 库和端点进行身份验证

    我是 Next js 的新手 正在将我的前端从 React 迁移到 Next v4 我已经使用 Spring 开发了一个后端 它连接到 Azure 上托管的 MySQL 数据库 该 API 在 Postman 和 React 前端上经过全面
  • 从输入类型编号获取无效值

    我正在使用输入类型数字 当它无效时 我如何从中获取值 例如 使用类型编号并仅打印 e 这本身是无效的 我正在使用 React 但我认为这个问题非常普遍 onChange event console log event target valu
  • 如何发送和接收大型 JSON 数据

    我对全栈开发比较陌生 目前正在尝试找出一种有效的方法send and fetch我的前端 React 和后端 Express 之间存在大量数据 同时最大限度地减少内存使用 具体来说 我正在构建一个地图应用程序 它需要我处理大型 JSON 文
  • 调用高阶组件时在 React 中访问类外部的 prop

    我正在尝试使用高阶组件 HOC 模式来重用一些连接到状态并使用 Redux Form formValueSelector 方法的代码 formValueSelector 需要一个引用表单名称的字符串 我想动态地设置它 并且每当我需要项目的值
  • 带换行符的 React/Momentjs 日期格式

    我有一个日期字符串 我想对其进行格式化 其中数字位于月份下 Jul 6 我尝试了几种不同的方法来添加新行
  • axios 请求中未发送正文数据

    我试图通过 axios 请求将数据发送到我的后端脚本 但正文看起来是空的 这是前端发送的请求 axios request method GET url http localhost 4444 next api headers Authori
  • 使用 Jest 和 React JS TestUtils 测试表单

    我有一个带有 3 个单选按钮的表单 如下所示 假名
  • 我点击的号码没有出现在反应项目的屏幕上

    当我尝试在屏幕中呈现点击的数字时 该数字没有出现 但它确实可以在控制台中显示 我不知道如何修复它应该在屏幕上 号码 旁边应用的号码 import render from testing library react import React
  • 将两个 JSON 数据合并为具有特定键值的一个

    我有两个 CSV 文件 球数据 json id 1 color red id 2 color blue 法庭 json court id 2001 ball in use 1 court id 2005 ball in use 2 如何根据
  • 这种类型注释在没有 TypeScript 的 React 代码中如何工作?

    我在看这段代码示例 https reacttraining com react router web example auth workflow在 ReactRouter 页面上 这篇文章很有趣 const PrivateRoute com
  • 如何在 webpack 中渲染嵌套的 SASS?

    采取以下CSS MyComponent color blue Button color red 以及以下 React 组件 import React from react import classes from MyComponent sc

随机推荐