react-virtualized报bpfrpt_proptype_WindowScroller引入错误

于 2023-11-29 17:59:50 发布
阅读量731 收藏
点赞数
分类专栏： 其他 文章标签： react.js 前端 vite virtualized error
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Sheng_zhenzhen/article/details/134695860
版权
文章描述了在使用Vite构建项目时遇到React-virtualized库的报错，原因是缺少bpfrpt_proptype_WindowScroller导出。解决方法是找到并注释掉相关文件的导入语句，并在vite.config.ts中进行配置。
摘要由CSDN通过智能技术生成

背景

  • vite构建阶段react-virtualized报错

报错信息

✘ [ERROR] No matching export in "node_modules/_react-virtualized@9.22.5@react-virtualized/dist/es/WindowScroller/WindowScroller.js" for import "bpfrpt_proptype_WindowScroller"

 node_modules/_react-virtualized@9.22.5@react-virtualized/dist/es/WindowScroller/utils/onScroll.js:74:9:
      74 │ import { bpfrpt_proptype_WindowScroller } from "....

解决办法

  1. 找到对应引用注释
    找到 node_modules/react-virtualized/dist/es/WindowScroller/utils/onScroll.js 这个文件，把下面这句话注释掉

    74行 | import { bpfrpt_proptype_WindowScroller } from “…/WindowScroller.js”;

    在这里插入图片描述

  2. vite.config.ts 修改

孤影_ls
关注
专栏目录
高级套娃之react-virtualized建议收藏
Dt_man的博客
06-15 3393
高级套娃react-virtualized 目录高级套娃react-virtualized概述基本使用listAutoSizerWindowScrollerInfiniteLoader结尾 概述 可以解决页面中长列表的渲染，实现在动态在可视区域加载内容 react-virtualized 是React组件，用来高效渲染大型列表和表格数据 GitHub地址： react-virtualized 基本使用 npm install react-virtualized --save // 安装该组件 之
当安装的第三方依赖包存在自身代码错误或业务不适用时解决方案
最新发布
zw_wen的博客
02-26 457
当安装的第三方依赖包存在自身代码错误或与当前业务细微不匹配时，需要自己修改部分代码以适应当前需求，那么怎样将当前的修改同步给团队中的其他人
react-virtualized-scroll:虚拟滚动搭配上拉应变加载的scroll组件
03-08
React虚拟滚动 虚拟滚动搭配上拉应变加载的scroll组件 简介 搭配typescript和react-hooks编写的虚拟滚动组件 基于react-virtualized进行再封装。 暴露了react-virtualized的参考，可调用react-virtualized的方法 除了渲染列表，你还可以预定其他的子组件（如悬浮球〜等），只需要把定位设为fixed 安装介绍 cnpm我react-virtualized react-virtualized-scroll-保存 从'react-virtualized-scroll'导入ReactVirtualizedScroll 使用 <ReactVirtualizedScroll onPullDown={handlePullDown} onPullUp={handlePullUp}
react-virtualized的WindowScroller、List、AutoSizer使用
qq_16597845的博客
11-11 2893
主要代码如下，红色字体为react-virtualized使用代码。 注意scrollElement 的定义，滚动区域宽高都可自定义，根据需要使用组件 import React, { Component } from 'react'; import { List, Flex, Button, Modal } from 'antd-mobile'; import { connect } from ...
ERROR: No matching export in “node_modules/react-virtualized/dist/es/WindowScroller/WindowScroller.j
tianbiancai1的博客
10-29 809
在node_modules/react-virtualized/dist/es/WindowScroller/utils/onScroll.js这个文件中的。找到node-modules中的react-virtualized目录。再重新启动项目就可以了。
react17 安装​ react-virtualized​ 报错解决办法
Kill_paradise的博客
11-14 774
npm installreact-virtualized --legacy-peer-deps
react长列表优化组件: react-virtualized
weixin_49409651的博客
06-10 445
下载安装参考网址：https://github.com/bvaughn/react-virtualized 代码 转载他人的 用于项目方便查看 App.js import React, { Component, } from "react"; import "./App.css" import { List, WindowScroller } from 'react-virtualized'; import 'react-virtualized/styles.css'; // only
react-virtualized-tree:使用react的虚拟化树视图组件
04-29
react-virtualized-tree是建立在之上的树视图react库 其主要目标是以美观，快速的方式显示树状数据。 作为React式库，它使用子函数来实现最大的可扩展性。 其背后的核心思想是，只要使用自己的组件或由树导出的组件...
react-virtualized-auto-sizer:来自React-virtualized的AutoSizer组件的独立版本
05-06
来自React-virtualized的AutoSizer组件的独立版本 安装 npm install --save react-virtualized-auto-sizer 文献资料 请在“ react-virtualized软件包”中“ AutoSizer”的API文档。 执照 麻省理工学院:copyright:
react-virtualized-sticky-tree:一个React组件，用于有效地渲染树状结构并支持位置
05-02
react-virtualized-sticky-tree使用类似的API进行 。 演示版 入门 npm install react-virtualized-sticky-tree --save 用法 基本范例 import { StickyTree } from 'react-virtualized-sticky-tree' ; const tree =...
react-virtualized-dnd:使用内置的虚拟化滚动条来响应拖放框架
05-14
react-virtualized-dnd是一个基于React的完全虚拟化的拖放框架，可实现出色的用户交互和出色的性能。 创建该项目是为了应对尝试将虚拟化库与拖放库一起使用时遇到的大量问题-react-virtualized-dnd可以为您完成所有...
解决No matching export in “node_modules/vue-demi/lib/index.mjs“ for import “hasInjectionContext“问题
qq_53280805的博客
08-29 7616
将Vue升级到3.3及以上版本，将pinia升级到2.1.0及以上版本。发现2.1.0及以上版本需要引入Vue3.3及以上版本。这可能是Vue版本和Pinia版本不匹配导致的。升级完之后查看package.json文件。此时再运行项目，就可以成功运行了。查看package.json文件。
Vite基础篇(初相识、搭建项目环境、预构建）
梅花寺
01-16 1643
/ 填入项目的CDN域名地址// 具体配置预构建的配置项都集中在下的Vite提供了{optimizeDeps: {esbuildOptions: { plugins: [// 加入 Esbuild 插件];}}整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。
No matching export in “node modules/vue/dist/vue.runtime. esm-bundler.js“ for import “default“报错
m0_57855994的博客
07-11 4206
[ERROR]No matching export in "node modules/vue/dist/vue.runtime. esm-bundler.js" for import "default"报错
《前端工程化》：Vite开发中的依赖构建
向梦想前进
06-08 1184
在动态的导入和条件导入中，我们导入的模块可能引入了其他依赖，而依赖构建是在启动前的，不是在运行时，所以vite检测到新依赖的引入，会重新构建依赖，并且会造成页面的刷新，对大型项目来说这两点都是非常致命的。如下图例子：在a.js中引入了模块，在main.jsVite在运行时发现了新的依赖，随之重新进行构建，并刷新页面，也叫二次构建二次构建都需要重新走一遍预构建的流程，并刷新页面，面对大项目也非常吃力，如何解决这个问题呢？我们可以通过include。
预构建 如何玩转秒级依赖预构建的能力？
江拥羡橙的博客
07-01 337
前面说到了如何启动预构建的问题，现在我们来谈谈怎样通过 Vite 提供的配置项来定制预构建的过程。Vite 将预构建相关的配置项都集中在属性上，我们来一一拆解这些子配置项背后的含义和应用场景。Vite 提供了plugins : [ // 加入 Esbuild 插件 ];} } }这个配置主要是处理一些特殊情况，如某个第三方包本身的代码出现问题了。接下来，我们就来讨论一下。
react-virtualized安装出错--解决npm ERR! ERESOLVE unable to resolve dependency tree
weixin_46715876的博客
10-11 2646
npm installreact-virtualized--save 出错 报错代码段 npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: hkzf-mobile@0.1.0 npm ERR! Found: react@17.0.2 npm ERR! node_modules/react npm ERR! react@"^17...
webpack中遇到 ERROR in ./node_modules/***的解决办法
热门推荐
qq_41672008的博客
04-09 9万+
如果在使用webpack编译时遇到如下情况： 可以看见遇见一片红，但是只要关注开头，就是ERROR in ./node_modules/***，于是可以想到你的node_modules出现了问题， 可能你的包出现问题，但是实际上包出现问题的几率不大，那什么导致了node_modules出现了问题？ 解决方法：原因基本是你在使用babel的时候，babel的文件匹配规则出现了错误，打...
react-virtualized
07-28
React-virtualized是一个React组件，用于高效渲染大型列表和表格数据。它可以帮助我们在项目中实现列表页面的渲染。你可以在GitHub上找到它的代码库，地址是https://github.com/bvaughn/react-virtualized。\[1\] 要使用react-virtualized，首先需要安装它。如果你使用的是React 16版本，可以通过运行npm install react-virtualized --save来安装。如果你使用的是React 17版本，需要运行npm install react-virtualized --legacy-peer-deps来安装。\[2\] 在项目的入口文件index.js中，你需要导入react-virtualized的样式文件。这个样式文件只需要导入一次即可。你可以在react-virtualized的文档中找到List组件的使用示例代码，并将其拷贝到你的项目中。然后，你可以分析这个示例代码，根据你的需求进行相应的修改和调整。\[2\] 另外，为了正确显示react-virtualized组件的样式，你还需要在项目的入口文件index.js中导入react-virtualized的样式文件。你可以使用以下代码导入样式文件：import 'react-virtualized/styles.css'。\[3\] #### 引用[.reference_title] - *1* *2* [在React项目中使用react-virtualized来对长列表性能优化](https://blog.csdn.net/m0_67301837/article/details/128526797)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [React组件react-virtualized，高效渲染大型列表和表格数据](https://blog.csdn.net/weixin_44478371/article/details/122790187)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值