TypeError: taro.createSelectorQuery is not a function

[Guest918]

NutUI 包名

@nutui/nutui

NutUI 版本号

4.3.14

平台

h5

重现链接

内网环境，无法访问

重现步骤

`

<nut-navbar title="主页" @click-title="onClick">
<template #right>

<nut-noticebar :scrollable="true" :IsAnimation="false">
  <template #left-icon>
    <img
      src="https://img13.360buyimg.com/imagetools/jfs/t1/72082/2/3006/1197/5d130c8dE1c71bcd6/e48a3b60804c9775.png"
      style="width: 20px; height: 20px"
    />
    <Notice color="#1989fa" />
  </template>
  <span style="color: #000">{{ text }}</span>
</nut-noticebar>

<nut-tabbar
  style="position: absolute; bottom: 0; left: 0; right: 0"
  v-model="active"
  unactive-color="#7d7e80"
  active-color="#1989fa"
>
  <nut-tabbar-item tab-title="Home" :value="11">
    <template #icon>
      <Home></Home>
    </template>
  </nut-tabbar-item>
  <nut-tabbar-item tab-title="Category" :dot="true">
    <template #icon>
      <Category></Category>
    </template>
  </nut-tabbar-item>
  <nut-tabbar-item tab-title="Find" :value="110">
    <template #icon>
      <Find></Find>
    </template>
  </nut-tabbar-item>
</nut-tabbar>

<script setup> import { Home, Category, Find, Notice } from "@nutui/icons-vue-taro"; import { ref } from "vue"; const flag = ref(false); const show = ref(false); const active = ref(0); const onClick = () => { show.value = true; }; const text = ref( "NutUI 是京东风格的移动端组件库，使用 Vue 语言来编写可以在 H5，小程序平台上的应用，帮助研发人员提升开发效率，改善开发体验。", ); </script>

`

期望的结果是什么？

解决报错

实际的结果是什么？

存在报错

环境信息

其他补充信息

No response

[Guest918]

是noticebar 组件报的错误

[heyongqi02]

报错信息贴出来看下

[heyongqi02]

<script setup lang="ts">
import { ref } from 'vue'
const text = ref(
  'NutUI 是京东风格的移动端组件库，使用 Vue 语言来编写可以在 H5，小程序平台上的应用，帮助研发人员提升开发效率，改善开发体验。'
)
</script>

<template>
  <div>
    <nut-noticebar :scrollable="true" :IsAnimation="false">
      <template #left-icon>
        <img
          src="https://img13.360buyimg.com/imagetools/jfs/t1/72082/2/3006/1197/5d130c8dE1c71bcd6/e48a3b60804c9775.png"
          style="width: 20px; height: 20px"
        />
        <Notice color="#1989fa" />
      </template>
      <span style="color: #000">{{ text }}</span>
    </nut-noticebar>
  </div>
</template>

尝试复现，没有报错。

可以在这个仓库里面复现一下么：https://github.com/betterhyq/nutui-vue-issue3310-reproduction

[hmadf]

同样的问题

nut-ui 最新版本 nutui-4.3.14-beta.3 taro最新4.1.10 目前通过 修复 nutui-4.3.14-beta.3这个包内的代码 上传私有源处理的 有多个组件都会报这个错误

[hmadf]

// H5 API Polyfill 开始
import Taro from '@tarojs/taro'

const isH5 = Taro.getEnv?.() === 'WEB' || Taro.getEnv?.() === Taro.ENV_TYPE?.WEB

const getRect = (el) => {
if (!el || !el.getBoundingClientRect) return null
const rect = el.getBoundingClientRect()
return {
left: rect.left,
right: rect.right,
top: rect.top,
bottom: rect.bottom,
width: rect.width,
height: rect.height,
}
}

const patchCreateSelectorQuery = () => {
const createSelectorQuery = function () {
const state = {
selector: null,
all: false,
viewport: false,
needRect: false,
needScroll: false,
fields: null,
}

    const buildResult = (el) => {
        if (!el && !state.viewport) return null
        if (state.viewport) {
            return {
                width: window.innerWidth,
                height: window.innerHeight,
                scrollTop: window.scrollY || 0,
                scrollLeft: window.scrollX || 0,
            }
        }

        const rect = getRect(el)
        if (!state.fields && !state.needRect && !state.needScroll) {
            return rect
        }

        const result = {}
        if (state.needRect || state.fields?.rect || state.fields?.size) {
            Object.assign(result, rect || {})
        }
        if (state.needScroll || state.fields?.scrollOffset) {
            result.scrollTop = el?.scrollTop ?? 0
            result.scrollLeft = el?.scrollLeft ?? 0
        }
        if (state.fields?.node) {
            result.node = el
        }
        return result
    }

    return {
        select(selector) {
            state.selector = selector
            state.all = false
            state.viewport = false
            return this
        },
        selectAll(selector) {
            state.selector = selector
            state.all = true
            state.viewport = false
            return this
        },
        selectViewport() {
            state.viewport = true
            return this
        },
        boundingClientRect() {
            state.needRect = true
            return this
        },
        scrollOffset() {
            state.needScroll = true
            return this
        },
        fields(options) {
            state.fields = options || {}
            return this
        },
        exec(callback) {
            let result = []
            if (state.viewport) {
                result = [buildResult(null)]
            } else if (state.all) {
                const nodes = Array.from(document.querySelectorAll(state.selector || ''))
                result = [nodes.map((el) => buildResult(el))]
            } else {
                const node = document.querySelector(state.selector || '')
                result = [buildResult(node)]
            }

            if (callback) callback(result)
            return this
        },
        in() {
            return this
        },
    }
}

const taroInstance = Taro?.default ?? Taro
if (typeof taroInstance.createSelectorQuery !== 'function') {
    taroInstance.createSelectorQuery = createSelectorQuery
}
if (Taro?.default && typeof Taro.default.createSelectorQuery !== 'function') {
    Taro.default.createSelectorQuery = createSelectorQuery
}
if (typeof Taro.createSelectorQuery !== 'function') {
    Taro.createSelectorQuery = createSelectorQuery
}
if (typeof globalThis !== 'undefined') {
    if (typeof globalThis.Taro === 'undefined') globalThis.Taro = taroInstance
    if (typeof globalThis.taro === 'undefined') globalThis.taro = taroInstance
    if (typeof globalThis.taro?.createSelectorQuery !== 'function') {
        globalThis.taro = globalThis.taro || taroInstance
        globalThis.taro.createSelectorQuery = createSelectorQuery
    }
    if (typeof globalThis.Taro?.createSelectorQuery !== 'function') {
        globalThis.Taro = globalThis.Taro || taroInstance
        globalThis.Taro.createSelectorQuery = createSelectorQuery
    }
}
console.log('✅ [Taro Polyfill] createSelectorQuery 已添加兼容实现')

}

if (isH5) {
patchCreateSelectorQuery()
}

export default Taro
// H5 API Polyfill 结束

写一个 Polyfill方法可以解决 untui 里面的taro 是小写 console.log('global taro', window.taro?.createSelectorQuery)

[jc840031139]

这个是taro vite构建引发的bug 不清楚具体原因

Object.defineProperty(Taro, 'createSelectorQuery', { value: Taro.createSelectorQuery, writable: true, configurable: true, enumerable: true })

加上这一段让createSelectorQuery 显示的存在于Taro实例上就能跑

[haolin-one]

我也有类似的问题，在upload组件里