CRA + React Leaflet:编译失败

2024-01-19

我刚刚开始一个全新的项目create-react-app并设置react-leaflet正如他们的文档所建议的here https://react-leaflet.js.org/docs/start-installation.

我正在尝试使用这个例子 https://react-leaflet.js.org/docs/start-setup检查它是否一切正常,但随后我收到以下错误:

./node_modules/@react-leaflet/core/esm/path.js 10:41
Module parse failed: Unexpected token (10:41)
File was processed with these loaders:
 * ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|   useEffect(function updatePathOptions() {
|     if (props.pathOptions !== optionsRef.current) {
>       const options = props.pathOptions ?? {};
|       element.instance.setStyle(options);
|       optionsRef.current = options;

好像react-scripts无法处理react-leaflet文件。 有人可以帮助我理解为什么会发生这种情况以及如何解决它吗?


在阅读了所有博客上的相关内容后,我得出的结论是:这是因为新版本的react-leaflet。我遇到了同样的问题,这是我摆脱错误的方法:

打开你的包.json file

 "browserslist": {
 "production": [
  ">0.2%",
  "not dead",
  "not op_mini all"
],
"development": [
  "last 1 chrome version",
  "last 1 firefox version",
  "last 1 safari version"
]
},

将其替换为以下几行:

"browserslist": [
">0.2%",
"not dead",
"not op_mini all"
],
  • 现在删除node_modules/.cache文件夹

  • npm 安装

  • npm 启动

另一种方法是在 package.json 文件中添加以下行:

"react-leaflet": ">=3.1.0 <3.2.0 || ^3.2.1",
"@react-leaflet/core": ">=1.0.0 <1.1.0 || ^1.1.1"
  • 这会skip新发布的版本@react-leaflet/核心包 https://react-leaflet.js.org/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

CRA + React Leaflet:编译失败 的相关文章

随机推荐

  • Swift 错误:无法将“ArraySlice”类型的值转换为预期的参数类型

    我收到此错误并且是 Swift 新手 我想获取数组 gt 5 的最后 5 个点 并将这 5 个点作为数组参数传递给函数 我怎样才能实现这一点并克服这个错误 无法将类型 ArraySlice 的值转换为预期参数类型 CGPoint if se
  • 如何在 Vue 生态系统之外使用 Vue 3 响应式对象

    我试图在微前端应用程序中传递这样创建的全局状态 但问题是我必须以某种方式 观察 更改 以便在 React 应用程序中设置 State 全局状态 js import reactive from vue const globalState re
  • Chrome 扩展图标清单

    如何更改此页面中的 Chrome 扩展程序图标 这是我的清单代码 manifest version 2 name Demo description This is demo version 1 0 browser action defaul
  • ASP.Net Session_Start 总是触发

    我对以下内容有点困惑 我在 Global asx 的 Session Start 中设置了一个带有一些逻辑的 asp net 网站 我预计这甚至只会在会话期间触发一次 然而 每个请求都会触发该事件 当我声明一个虚拟会话对象时 这解决了问题
  • 使用 Mockito 2 模拟期末课程

    我正在从我当前正在进行的项目中删除 Powermock 因此我尝试仅使用 Mockito mockito core 2 2 28 重写一些现有的单一测试 当我运行测试时 出现以下错误 org mockito exceptions base
  • 如何声明其类没有默认构造函数的对象数组?

    如果一个类只有一个构造函数和一个参数 如何声明数组 我知道在这种情况下推荐使用向量 例如 如果我有一堂课 class Foo public Foo int i 如何声明一个包含 10000 个 Foo 对象的数组或向量 对于数组 您必须在定
  • 如何将 .env 文件中的环境变量读取到 terraform 脚本中?

    我正在使用 terraform 在 aws 上构建 lambda 函数 terraform 脚本中用于上传环境变量的语法是 resource aws lambda function name of function environment
  • CSS Transition 相当于 jQuery fadeIn()、fadeOut()、fadeTo()

    我有这个 button1 click function header bg fadeTo 15 0 function document getElementById header bg style fill FF0000 fadeTo sl
  • 完全通过 FIFO 连接到 MySQL 客户端

    在 Bash 脚本中 我想在多个顺序访问中保持 MySQL 会话打开 访问 MySQL 的常见方法是为每个 SQL 命令或命令集打开一个单独的会话 例如 mysql u user e show tables 此方法的限制是那些需要双重事务的
  • Django settings.AUTH_USER_MODEL 在单独的模块中定义

    表达我的事情的正确方式是什么AUTH USER MODEL 我有以下一组 文件夹结构 后端 API 楷模 用户 py user py位于内models folder 在设置 py中 AUTH USER MODEL myapp User IN
  • 有没有办法在 JavaFX LineChart 中断开串联的 2 个点?

    我在 LineChart 上有四个系列 每个系列都包含一定数量的按时间划分的图表 默认情况下 LineChart 连接这些图表 它看起来很难看并且在上下文中没有任何意义 所以我想将它们分开 但保留颜色和图例 换句话说 我想要的是删除两个特定
  • Spring框架中的依赖注入和控制反转是什么?

    依赖注入 和 控制反转 经常被认为是使用 Spring 框架开发 Web 框架的主要优点 如果可能的话 有人可以用一个非常简单的术语解释它是什么吗 Spring 有助于创建松散耦合的应用程序 因为依赖注入 在 Spring 中 对象定义它们
  • C++ 自省技术,类似于 python

    C 中是否有像 Python 中那样的自省技术 例如 我想获取有关特定对象的更多信息 而不需要通过头文件或引用 cpp 引用 我是问了一个正确的问题 还是走错了方向 Update 根据以下答案 这个答案与我的问题相关 如何向 C 应用程序添
  • Blaze:{{#if}} 语句中的逻辑(Not、Or、And...)

    有没有办法在 if 语句中进行逻辑运算 我希望有这样的事情 if A B some html if 我在 blaze 中找不到有关逻辑的文档 所以我猜它不受支持 我只是想确定一下 抱歉问了一个相当愚蠢的问题 正如 Billy Bob 所建议
  • Express.js:如何获取 ip 地址并渲染视图?

    我真的认为这应该很容易 但是当我渲染一个jade模板时 我也想抓取ip地址 我的代码看起来像这样 app js app get index home index js exports home function req res res re
  • C# 中的外部 IP 地址

    在 C 中获取外部 IP 地址的最简单方法是什么 框架内没有内置的方法来执行此操作 因为很难确定外部 公共 IP 地址是什么 当然 这是假设您的 IP 在某个网关后面经过 NAT 一种方法是抓取类似的网站http www whatismyi
  • 解释错误:ISO C++ 禁止声明没有类型的“Personlist”

    我有一个类将处理我之前创建的另一个类的对象数组 效果很好 当我尝试创建列表类的对象时出现问题 这是列表类的标题 ifndef personlistH define personlistH include Person h include
  • 如何从当前月份中选择当前日期

    我想检索当月 1 30 之间的数据 我正在使用 MSACCESS Dbase 来执行此操作 下面是我正在尝试的查询 SELECT count usercategory as category count usercategory FROM
  • VS Code 扩展安全如何处理?

    我已经使用 VS Code 一年左右了 我不知道 VS Code Extension 安全性是如何处理的 我对这样的事情感到震惊 Markdown 预览增强 https marketplace visualstudio com items
  • CRA + React Leaflet:编译失败

    我刚刚开始一个全新的项目create react app并设置react leaflet正如他们的文档所建议的here https react leaflet js org docs start installation 我正在尝试使用这个