Vue3使用yarn安装vue-virtual-scroller时出现import default匹配错误

问题原因：你当前安装的vue-virtual-scroller版本是为Vue2设计的，Vue2的导出包含默认导出，但Vue3的ES模块（如vue.esm-bundler.js）不再提供默认导出，因此出现导入匹配失败的错误。

解决方案步骤 #

1. 安装Vue3兼容版本的vue-virtual-scroller #

• 先卸载现有版本：

  yarn remove vue-virtual-scroller
  

• 安装适配Vue3的next版本：

  yarn add vue-virtual-scroller@next
  

2. 按照Vue3的方式正确引入组件 #

全局注册（在main.js中）

import { createApp } from 'vue'
import App from './App.vue'
import VueVirtualScroller from 'vue-virtual-scroller'
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'

const app = createApp(App)
app.use(VueVirtualScroller)
app.mount('#app')

按需引入（在单个组件中）

import { RecycleScroller } from 'vue-virtual-scroller'
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'

export default {
  components: {
    RecycleScroller
  }
}

3. 清理依赖并重新安装（可选，确保依赖无冲突） #

如果之前的操作后仍有问题，执行以下命令清理后重新安装：

rm -rf node_modules yarn.lock
yarn install

内容的提问来源于stack exchange，提问作者temp