taro vue Failed to resolve component: scroll-view？

Z时代
2024-03-03
分类：IT

在 taro + vue + jsx 中使用 scroll-view 提示如下错误，请问这是为什么呢？

[Vue warn]: Failed to resolve component: scroll-view If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

用到 scroll-view 的代码：

import { defineComponent, useAttrs } from 'vue';
export default defineComponent({
  props: {
    refresherTriggered: {
      type: Boolean,
      default: false
    }
  },
  emits: ['refresher-refresh'],
  setup(props, { slots, emit }) {
    const attrs = useAttrs();
    function onRefresherRefresh() {
      emit('refresher-refresh');
    }
    return () => (
      <scroll-view {...attrs} {...props} onRefresherrefresh={onRefresherRefresh}>
        {slots.default()}
      </scroll-view>
    );
  }
});

依赖版本：

"dependencies": { "@babel/runtime": "^7.7.7", "@nutui/icons-vue-taro": "^0.0.9", "@nutui/nutui-taro": "^4.0.4", "@tarojs/components": "3.6.8", "@tarojs/helper": "3.6.8", "@tarojs/plugin-framework-vue3": "3.6.8", "@tarojs/plugin-html": "3.6.8", "@tarojs/plugin-platform-alipay": "3.6.8", "@tarojs/plugin-platform-h5": "3.6.8", "@tarojs/plugin-platform-jd": "3.6.8", "@tarojs/plugin-platform-qq": "3.6.8", "@tarojs/plugin-platform-swan": "3.6.8", "@tarojs/plugin-platform-tt": "3.6.8", "@tarojs/plugin-platform-weapp": "3.6.8", "@tarojs/runtime": "3.6.8", "@tarojs/shared": "3.6.8", "@tarojs/taro": "3.6.8", "axios": "^1.4.0", "dayjs": "^1.11.9", "lodash-es": "^4.17.21", "md5": "^2.3.0", "pinia": "2.0.36", "vue": "^3.2.40" }, "devDependencies": { "@babel/core": "^7.8.0", "@rushstack/eslint-patch": "^1.3.2", "@tarojs/cli": "3.6.8", "@tarojs/taro-loader": "3.6.8", "@tarojs/webpack5-runner": "3.6.8", "@types/node": "^18.15.11", "@types/webpack-env": "^1.13.6", "@typescript-eslint/parser": "^5.20.0", "@unocss/webpack": "^0.53.4", "@vue/babel-plugin-jsx": "^1.0.6", "@vue/compiler-sfc": "^3.2.40", "@vue/eslint-config-prettier": "^7.1.0", "@vue/eslint-config-typescript": "^11.0.3", "babel-preset-taro": "3.6.8", "cross-env": "^7.0.3", "css-loader": "3.4.2", "eslint": "^8.12.0", "eslint-config-taro": "3.6.8", "eslint-plugin-vue": "^9.9.0", "prettier": "^2.8.4", "style-loader": "1.3.0", "stylelint": "9.3.0", "ts-node": "^10.9.1", "typescript": "^4.1.0", "unocss": "^0.53.4", "unocss-preset-weapp": "^0.53.5", "unplugin-auto-import": "^0.16.6", "unplugin-vue-components": "^0.23.0", "vue-loader": "^17.0.0", "webpack": "^5.78.0"

}

相关的文档：https://docs.taro.zone/docs/components/viewContainer/scroll-view

回答：

题主是不是忘记引入了，我看题主代码中没引入，vue 报错的是没有找到 scroll-view 这个标签并且它也不是原生标签

import { ScrollView } from '@tarojs/components';

那个文档组件库那块默认开发者是引入的，所以没有引入代码，是个小坑

文档中允许 vue 直接使用不引入的情况，仅限于 template

比如：

<template>
  <view class="c">
    <text>c component</text>
  </view></template>

而题主使用的是 jsx，就不能省略引入的流程

import { reactive } from 'vue'
import { View, Text, Button } from '@tarojs/components'
export default {
  name: 'Index',
  components: {
    View,
    Text,
    Button,
  },
  setup() {
    const state = reactive({
      msg: '欢迎使用 NutUI 开发小程序',
      msg2: '你成功了～',
    })
    const handleClick = (msg) => {
      state.msg = msg
    }
    return () => {
      return (
        <View>
          <View>
            <Text>{state.msg}</Text>
          </View>
          <Button onTouchstart={() => handleClick(state.msg2)}>Confirm</Button>
        </View>
      )
    }
  },}