TypeError: Invalid value used as weak map key

alexanderhorner commented 2 years ago

My code:

<script setup>
import { ref, onBeforeMount, defineProps, onMounted } from 'vue'

import { useLazyload } from 'vue3-lazyload'

const props = defineProps(['title', 'category', 'timestamp', 'image', 'slug'])

// If the prop image starts with !!getImageByName!! it will look in 
const thumbnailImage = ref(props.image)
const lazyRef = useLazyload(thumbnailImage)

onBeforeMount(() => {
    let imgName = thumbnailImage.value

    if (imgName.startsWith("!!getImageByName!!")) {
        imgName = imgName.replace('!!getImageByName!!','')
        thumbnailImage.value = `/img/${imgName}-thumbnail.jpeg`
    }
})
</script>

Console Error

runtime-core.esm-bundler.js:226 TypeError: Invalid value used as weak map key
    at WeakMap.set (<anonymous>)
    at w._initIntersectionObserver (index.mjs:144:18)
    at w.update (index.mjs:110:10)
    at index.mjs:240:12
    at tn (runtime-core.esm-bundler.js:155:22)
    at nn (runtime-core.esm-bundler.js:164:21)
    at Array.h (runtime-core.esm-bundler.js:1782:17)
    at kn (runtime-core.esm-bundler.js:328:31)
    at xn (runtime-core.esm-bundler.js:339:5)
    at Q (runtime-core.esm-bundler.js:6206:9)
(anonymous) @ runtime-core.esm-bundler.js:226
rn @ runtime-core.esm-bundler.js:204
tn @ runtime-core.esm-bundler.js:158
nn @ runtime-core.esm-bundler.js:164
h @ runtime-core.esm-bundler.js:1782
kn @ runtime-core.esm-bundler.js:328
xn @ runtime-core.esm-bundler.js:339
Q @ runtime-core.esm-bundler.js:6206
mount @ runtime-core.esm-bundler.js:4402
Ws.t.mount @ runtime-dom.esm-bundler.js:1605
setup @ app.js:20
(anonymous) @ index.js:1
Promise.then (async)
t.yP @ index.js:1
77745 @ app.js:12
r @ bootstrap:19
(anonymous) @ startup:4
r.O @ chunk loaded:23
(anonymous) @ startup:7
(anonymous) @ startup:7

murongg commented 2 years ago

Please upgrade latest version

alexanderhorner commented 2 years ago

Fixed! Thanks for being so lightning fast, greatly appreciated!

Originally posted by @alexanderhorner in https://github.com/murongg/vue3-lazyload/issues/29#issuecomment-1145460905

murongg / vue3-lazyload

TypeError: Invalid value used as weak map key #28

My code:

Console Error