[question]taro3 vue3 nutui3 开发微信小程序 Runtime warning

[SuGod]

你想知道什么？

我根据文档初始化项目，然后修改了pages/index/index.vue,使用了swiper组件，yarn dev:weapp 在小程序开发工具中打开，控制台抛出多个warning，并且swiper没有显示。

 [Vue warn]: Failed to resolve component: swiper 
  at <NutSwiper current="1" indicator-dots="true" indicator-color="#426543"  ... > 
  at <Index tid="pages/index/index?$taroTimestamp=1627285279653" > 
  at <App>


[Vue warn]: Failed to resolve component: swiper-item 
  at <NutSwiperItem> 
  at <NutSwiper current="1" indicator-dots="true" indicator-color="#426543"  ... > 
  at <Index tid="pages/index/index?$taroTimestamp=1627285279653" > 
  at <App>

[WXML Runtime warning] ./base.wxml
 Template `tmpl_0_swiper` not found.
  275 | 
  276 | <template name="tmpl_1_container">
> 277 |   <template is="{{xs.a(1, i.nn, l)}}" data="{{i:i,cid:1,l:xs.f(l,i.nn)}}" />
      |                ^
  278 | </template>
  279 | 
  280 | <template name="tmpl_2_catch-view">


VM451 WAService.js:2 asmCrypto seems to be load from an insecure origin; this may cause to MitM-attack vulnerability. Consider using secure transport protocol.

index.vue 代码如下：

该代码是从文档中复制的 没有做任何改动。

<template>
  <view class="container">
    <nut-swiper current="1" indicator-dots="true" indicator-color="#426543" autoplay="true" interval="3000">
      <nut-swiper-item>
        <img src="https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg" alt="" />
      </nut-swiper-item>
      <nut-swiper-item>
        <img src="https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg'" alt="" />
      </nut-swiper-item>
      <nut-swiper-item>
        <img src="https://storage.360buyimg.com/jdc-article/welcomenutui.jpg" alt="" />
      </nut-swiper-item>
      <nut-swiper-item>
        <img src="https://storage.360buyimg.com/jdc-article/fristfabu.jpg" alt="" />
      </nut-swiper-item>
    </nut-swiper>

    <nut-button type="primary">主要按钮</nut-button>
    <nut-button type="info">信息按钮</nut-button>
    <nut-button type="default">默认按钮</nut-button>
    <nut-button type="danger">危险按钮</nut-button>
    <nut-button type="warning">警告按钮</nut-button>
    <nut-button type="success">成功按钮</nut-button>
  </view>
</template>

app.js 代码如下：

import { createApp } from 'vue'
import { Button, Swiper, Icon } from '@nutui/nutui-taro'
import '@nutui/nutui-taro/dist/style.css'

import './app.scss'

const App = createApp({})

App.use(Button)
  .use(Swiper)
  .use(Icon)

export default App

描述你考虑过的替代方案

build:weapp 和 dev:weapp 结果都一样。
文档中的 全量引入和按需引入都试过，结果一样。

[mtm2233]

InfiniteLoading 也同样错误

[b2nil]

这里边存在两个问题。

1. 不能解析组件

这是编译打包时造成的问题。编译 template 时，应该采用 @tarojs/mini-runner 中 vue-loader 的相同编译配置，把 COMPONENT 类型的节点转换为 ELEMENT 类型。直接配置compilerOptions.isNativeTag 或者 compilerOptions.isCustomElement 也行。

目前 NutUI Taro Vue 版本打包时没处理这点：

nutui/vite.config.build.taro.vue.ts

Line 25 in a33c6e1

plugins: [vue()],

配置好 compilerOptions 后，<swiper-item /> 会被编译为：

// 此处有误
const SwiperItem = resolveComponent('swiper-item')
return createVNode(SwiperItem)

2. 缺少小程序模板
   这是因为 Taro 目前对收集 Vue 第三方组件所用到的小程序组件的能力有待改进，详见: 增强 Vue 框架（2.0 和 3.0）收集第三方组件所用到的小程序组件的能力 NervJS/taro#9740 。

目前 Taro Vue 是通过 vue-loader 来收集使用到的小程序标签的。 以这个 issue 为例，如果楼主的代码中没有用到过原生的 swiper 标签（即没有通过 vue-loader 收集过标签），Taro 是收集不到 NutUI 所使用过的小程序标签的，所以会报找不到模板。view 之所以没有报错，是因为前面使用过，已经收集了。

NutUI 还需要提供一个 Taro 插件来帮助开发者收集 NutUI 中使用到的小程序组件。

[richard1015]

@b2nil 感谢提供解决方案，我们跟进一下 @szg2008

[b2nil]

@richard1015 @szg2008
上面有一处错误，应该是：
配置好 compilerOptions 后，针对小程序平台， 应被编译为类似：createVNode("swiper-item", ...)，而 h5 平台则应该编译为类似：createVNode(resolveComponent("taro-swiper-item"), ...)。总之参考 Taro 的 vue-loader 配置即可。

[Iveon]

这个错误到现在还存在

[dengZhiNeng]

还没解决吗

[champion0122]

貌似还是没有解决呀
nutui-taro版本3.1.18. taro版本3.4.4
使用 InfiniteLoading出现该问题

[Diamondjcx]

有人解决这个问题吗？