taro vue Failed to resolve component: scroll-view？

站长

2024年06月30日 08:42 · 阅读数 7

在 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"
  }

1个回答

test

2024-06-30

题主是不是忘记引入了，我看题主代码中没引入，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>
      )
    }
  },
}

适合作为回答的

经过验证的有效解决办法
自己的经验指引，对解决问题有帮助
遵循 Markdown 语法排版，代码语义正确

不该作为回答的

询问内容细节或回复楼层
与题目无关的内容
“赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容