youzan / vant

A lightweight, customizable Vue UI library for mobile web apps.
https://vant.pro/vant/
MIT License
23.29k stars 9.49k forks source link

在Nuxt3 中对vant单独打包后报错,Cannot access 'ol' before initialization #13100

Open wgh970312 opened 2 months ago

wgh970312 commented 2 months ago

重现链接

https://github.com/wgh970312/integrated-vant

Vant 版本

4.9.4

描述一下你遇到的问题。

当我在nuxt中配置将vant单独打包后,访问项目时,会提示Cannot access 'fo' before initialization。其中fo是vue的class RefImpl{}

重现步骤

  1. 执行项目clone并安装相关依赖
  2. 执行pnpm generate
  3. 进入dist或.output/public目录
  4. 执行serve
  5. 访问页面,查看控制台,出现报错Cannot access 'fo' before initialization

我在nuxt中添加了配置,将vant单独打包

vite: {
    build: {
      rollupOptions: {
        output: {
          manualChunks(id) {if (id.includes('node_modules/vant/')) {
              return 'vant'
            }
          }
        }
      }
    }
  }

这种情况还在我单独导入Sticky组件时出现,比如

import { Sticky } from 'vant'
import 'vant/es/sticky/style'

<component :is="sticky ? Sticky : 'div'">
  <button>button</button>
</component>

设备/浏览器

No response

wgh970312 commented 2 months ago

问题2:

当使用了allowMultipleToast后,然后在其他页面打开toast,toast的背景变成了白的的。看样式发现van-popup的样式被放到van-toast的上面了

步骤
  1. 在app.vue中导入allowMultipleToast并执行
  2. 在pages/dialog.vue中使用van-dialog组件
  3. 在pages/toast.vue中使用showToast()。此时发现toast的背景变成了白色