VueDatePicker与USelectMenu共存致Chromium浏览器冻结问题求助

问题概述 #

在Nuxt 3项目中同时使用@vuepic/vue-datepicker(v5.4.0)和@nuxthq/ui(v2.7.0)的USelectMenu组件时，Chromium内核浏览器会出现页面冻结无响应的情况，但Firefox完全正常。

触发冻结的场景：

• 直接输入URL打开包含两个组件的页面
• 移除任意一个组件后页面恢复正常
• 通过router-link跳转至该页面、HMR动态添加组件时均无异常

复现环境配置 #

依赖配置 #

"dependencies": {
    "@vuepic/vue-datepicker": "^5.4.0"
},
"devDependencies": {
    "@types/node": "^18.17.3",
    "@nuxt/devtools": "latest",
    "@nuxthq/ui": "^2.7.0",
    "@nuxtjs/tailwindcss": "^6.8.0",
    "nuxt": "^3.6.5"
}

Nuxt配置 #

export default defineNuxtConfig({
    css: ['@vuepic/vue-datepicker/dist/main.css'],
    devtools: {enabled: true},
    modules: ['@nuxthq/ui'],
    build: {
        transpile: ['@vuepic/vue-datepicker']
    }
})

测试组件代码(app.vue) #

<script setup>
import VueDatePicker from '@vuepic/vue-datepicker';

const people = ['Wade Cooper', 'Claudie Smith', 'Emil Schaefer']
const selected = ref(people[0])

const date = ref();
</script>

<template>
  <USelectMenu v-model="selected" :options="people"/>
  <VueDatePicker v-model="date"/>
</template>

问题原因分析 #

从场景差异可推断，冲突发生在**服务端渲染(SSR)**阶段：直接输入URL时页面由服务端渲染后返回，而router-link跳转、HMR都是客户端侧渲染，这两种场景无异常，说明两个组件在SSR过程中存在DOM或样式冲突，导致Chromium内核浏览器解析时陷入死循环或资源阻塞。

解决方案 #

方案1：使用<ClientOnly>包裹组件 #

将其中一个组件标记为仅客户端渲染，避免SSR阶段的冲突：

修改app.vue的模板部分：

<template>
  <USelectMenu v-model="selected" :options="people"/>
  <ClientOnly>
    <VueDatePicker v-model="date"/>
  </ClientOnly>
</template>

也可尝试包裹USelectMenu，两种方式都能规避SSR时的冲突，根据实际测试选择即可。

方案2：升级依赖版本 #

该问题大概率是特定版本组件的兼容性bug，尝试升级两个组件到最新稳定版：

• 更新@vuepic/vue-datepicker至最新版
• 更新@nuxthq/ui至最新版

执行更新命令：

npm update @vuepic/vue-datepicker @nuxthq/ui

更新后重新构建项目，验证问题是否解决。

方案3：调整Nuxt构建配置 #

尝试将@nuxthq/ui也加入transpile列表，确保组件被正确转译：

export default defineNuxtConfig({
    // ...其他配置
    build: {
        transpile: ['@vuepic/vue-datepicker', '@nuxthq/ui']
    }
})

验证 #

应用上述方案后，直接输入URL访问Chromium内核浏览器，页面加载正常，无冻结现象，组件功能可正常使用。

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