react-virtualized报bpfrpt_proptype_WindowScroller引入错误

Vite构建中React-virtualized报错及解决方案,
最新推荐文章于 2024-08-26 07:37:40 发布
原创 最新推荐文章于 2024-08-26 07:37:40 发布 · 1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#react.js #前端 #vite #virtualized #error

文章描述了在使用Vite构建项目时遇到React-virtualized库的报错，原因是缺少bpfrpt_proptype_WindowScroller导出。解决方法是找到并注释掉相关文件的导入语句，并在vite.config.ts中进行配置。

背景

  • 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 修改

Vite基础篇(初相识、搭建项目环境、预构建）
梅花寺
01-16 1782
/ 填入项目的CDN域名地址// 具体配置预构建的配置项都集中在下的Vite提供了{optimizeDeps: {esbuildOptions: { plugins: [// 加入 Esbuild 插件];}}整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。
虚拟列表react-virtualized使用（npm install react-virtualized）
最新发布
weixin_50236973的博客
04-09 823
虚拟列表react-virtualized使用（npm install react-virtualized）
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}
解决No matching export in “node_modules/vue-demi/lib/index.mjs“ for import “hasInjectionContext“问题
qq_53280805的博客
08-29 9985
将Vue升级到3.3及以上版本，将pinia升级到2.1.0及以上版本。发现2.1.0及以上版本需要引入Vue3.3及以上版本。这可能是Vue版本和Pinia版本不匹配导致的。升级完之后查看package.json文件。此时再运行项目，就可以成功运行了。查看package.json文件。
react-virtualized的WindowScroller、List、AutoSizer使用
qq_16597845的博客
11-11 3145
主要代码如下，红色字体为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 1051
在node_modules/react-virtualized/dist/es/WindowScroller/utils/onScroll.js这个文件中的。找到node-modules中的react-virtualized目录。再重新启动项目就可以了。
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 =...
react17 安装​ react-virtualized​ 报错解决办法
Kill_paradise的博客
11-14 884
npm installreact-virtualized --legacy-peer-deps
使用React Virtualized实现高效滚动列表教程
gitblog_00196的博客
08-25 1212
使用React Virtualized实现高效滚动列表教程 项目介绍 本项目基于React Virtualized，一个在React应用程序中渲染大量数据时保持高性能的库。通过虚拟化技术，只渲染可视区域内的列表项，极大提高了内存和CPU的使用效率。特别适合处理长列表场景，如商品列表、用户列表等。 项目快速启动 安装依赖 首先，确保你的开发环境已经安装了Node.js。然后，在命令行中执行以下命...
推荐使用：React虚拟化渲染利器 —— React Virtualized
gitblog_00042的博客
05-10 1860
在前端开发中，高效地处理大数据量列表和表格是一个常被提及的挑战。今天，我要向大家推荐一个强大的开源库——React Virtualized，它为React开发者提供了一套高效的组件，让你轻松应对大型数据集的渲染问题。 ## 1、项目介绍 React Virtualized 是由 Brian Vaughn 开发的一款React组件库，其核心思想在于只渲染视窗内可见的部分元素，从而显著提高大型数据...
高级套娃之react-virtualized建议收藏
Dt_man的博客
06-15 3730
高级套娃react-virtualized 目录高级套娃react-virtualized概述基本使用listAutoSizerWindowScrollerInfiniteLoader结尾 概述 可以解决页面中长列表的渲染，实现在动态在可视区域加载内容 react-virtualized 是React组件，用来高效渲染大型列表和表格数据 GitHub地址： react-virtualized 基本使用 npm install react-virtualized --save // 安装该组件 之
react长列表优化组件: react-virtualized
weixin_49409651的博客
06-10 512
下载安装参考网址：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
列表找房（十）03-页面滚动效果控制——WindowScroller组件用法 & Scroll属性
weixin_44867717的博客
05-25 716
页面滚动效果控制——WindowScroller组件用法 & Scroll属性 需求：让List列表的滚动随着window窗口的滚动而滚动 WindowScroller组件用法 官网：https://github.com/bvaughn/react-virtualized/blob/master/docs/WindowScroller.md 导入该组件 使用该组件包裹List组件，并且向List组件提供一个高度 <WindowScroller> {({ heig
No matching export in “node modules/vue/dist/vue.runtime. esm-bundler.js“ for import “default“报错
m0_57855994的博客
07-11 5841
[ERROR]No matching export in "node modules/vue/dist/vue.runtime. esm-bundler.js" for import "default"报错
预构建 如何玩转秒级依赖预构建的能力？
江拥羡橙的博客
07-01 470
前面说到了如何启动预构建的问题，现在我们来谈谈怎样通过 Vite 提供的配置项来定制预构建的过程。Vite 将预构建相关的配置项都集中在属性上，我们来一一拆解这些子配置项背后的含义和应用场景。Vite 提供了plugins : [ // 加入 Esbuild 插件 ];} } }这个配置主要是处理一些特殊情况，如某个第三方包本身的代码出现问题了。接下来，我们就来讨论一下。
React Virtualized Scroll 项目教程
gitblog_00195的博客
08-26 338
React Virtualized Scroll 项目教程 1. 项目的目录结构及介绍 react-virtualized-scroll/ ├── public/ │ ├── index.html │ └── ... ├── src/ │ ├── components/ │ │ ├── ScrollComponent.js │ │ └── ... │ ├── App...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值