[Bug Report] 在nuxt3中使用vant,打包后运行异常

[qyn980427]

重现链接

https://stackblitz.com/edit/nuxt-starter-txwyvc?file=plugins%2Fvant.ts,pages%2Findex.vue,package.json

Vant 版本

3.5.3

描述一下你遇到的问题。

在nuxt3中使用vant，目前项目刚开始，使用vant组件不是特别多，在开发环境中没什么异常，打包后出现异常 暂时发现的问题：

1. @vant/touch-emulator doesn't appear to be written in CJS, but also doesn't appear to be a valid ES module (i.e. it doesn't have "type": "module" or an .mjs extension for the entry point). Please contact the package author to fix.
2. 类似于 [Vue warn]: Component van-tabbar-item is missing template or render function.这样的报错，好几个组件都有
3. 使用Tabbar之后，TypeError: Cannot read properties of null (reading 'proxy')，导致nuxt出现500

重现步骤

如上述链接锁提供demo 1.npm run build 2.npm run preview 3.访问 4.访问后控制台出现异常

设备/浏览器

很好复现

[chenjiahan]

@vant/touch-emulator 的问题已发布 1.4.0 版本修复

[hqwlkj]

@chenjiahan 这个问题 https://github.com/vant-ui/vant/issues/10873 是需要自己在项目中添加 @vant/[email protected]的依赖吗？

执行nuxt build没有报错，但是运行nuxt preview或者nuxt start报如下错误

TypeError: Cannot read properties of null (reading 'proxy')
    at useRoute (/Users/nuxt-ssr-app/.output/server/node_modules/vant/lib/vant.cjs.js:477:38)
    at setup (/Users/nuxt-ssr-app/.output/server/node_modules/vant/lib/vant.cjs.js:759:20)
    at callWithErrorHandling (file:///Users/nuxt-ssr-app/.output/server/chunks/handlers/renderer.mjs:2532:23)
    at setupStatefulComponent (file:///Users/nuxt-ssr-app/.output/server/chunks/handlers/renderer.mjs:8178:30)
    at setupComponent (file:///Users/nuxt-ssr-app/.output/server/chunks/handlers/renderer.mjs:8159:12)
    at renderComponentVNode (file:///Users/nuxt-ssr-app/.output/server/chunks/handlers/renderer.mjs:10504:17)
    at renderVNode (file:///Users/nuxt-ssr-app/.output/server/chunks/handlers/renderer.mjs:10627:22)
    at renderVNodeChildren (file:///Users/nuxt-ssr-app/.output/server/chunks/handlers/renderer.mjs:10642:9)
    at renderVNode (file:///Users/nuxt-ssr-app/.output/server/chunks/handlers/renderer.mjs:10619:13)
    at renderVNodeChildren (file:///Users/nuxt-ssr-app/.output/server/chunks/handlers/renderer.mjs:10642:9)
[Vue warn]: Component van-button is missing template or render function.

[qyn980427]

您好，vant/touch-emulator这个插件我看已经修复 我目前在nuxt3项目中所使用的vant组件非常有限，所以我不确定除了那几个组件之外的其他组件是否有类似问题 我现在有两个疑问： 1.在bug修复之前，是否有中转方案可以解决这个问题？ 2.现在在nuxt3项目中，vant4.x可以投入使用吗？

[chenjiahan]

vant 4 是挺稳定了，不过 nuxt 3 还不是很稳定，报的问题也莫名其妙的，暂时没有头绪

[chenjiahan]

感兴趣的话可以深入研究下原因，给 vant 提个 PR~

[qyn980427]

您的意思是vant3.x目前在nuxt3里面，这个issure提到的这类型问题还没有头绪解决是吗？

[hqwlkj]

vant4 + nuxt3 目前也会存在这样的问题

[chenjiahan]

这个issure提到的这类型问题还没有头绪解决是吗？

嗯，复杂的问题还没时间看

[chenjiahan]

nuxt 3 还没正式发布，功能不算稳定

[hqwlkj]

还是希望官方能给给出一个处理的方案，目前项目采用的 [email protected] + [email protected] 进行开发的。我还测试了 [email protected] 都存在 TypeError: Cannot read properties of null (reading 'proxy')， 等问题。

[hqwlkj]

@chenjiahan

https://github.com/nuxt/nuxt.js/issues/14644

nuxt3 的开发人员回复的，麻烦你们看一如何处理

[hzm18]

同样关注这个问题，在dev的时候是没有问题的，打包的时候运行有问题。

[chenjiahan]

nuxt3 的开发人员回复的，麻烦你们看一如何处理

这个 issue 里已经提供了很明确的描述了吧，本质上与 Vant 无关的，只要 external 了 Vue 的 library 都会遇到这个问题。

You can track the root issue at https://github.com/nuxt/nuxt.js/issues/13632.

You can add /vant/ to your build.transpile or enable experimental.externalVue for now:

[hqwlkj]

nuxt3 的开发人员回复的，麻烦你们看一如何处理

这个 issue 里已经提供了很明确的描述了吧，本质上与 Vant 无关的，只要 external 了 Vue 的 library 都会遇到这个问题。

You can track the root issue at nuxt/nuxt.js#13632.

You can add /vant/ to your build.transpile or enable experimental.externalVue for now:

赞