[Vue warn]: Invalid vnode type when creating vnode: null.

[waysagency]

Hi there,

I'm getting the following error.

[Vue warn]: Invalid vnode type when creating vnode: null.
[nuxt] [request error] [unhandled] [500] Invalid value used as weak map key
  at WeakMap.set (<anonymous>)  
  at normalizePropsOptions (C:\Ways Agency\Clients\ways-cards\frontend\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:3966:11)  
  at createComponentInstance (C:\Ways Agency\Clients\ways-cards\frontend\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:6957:23)  
  at renderComponentVNode (C:\Ways Agency\Clients\ways-cards\frontend\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:171:22)  
  at Module.ssrRenderComponent (C:\Ways Agency\Clients\ways-cards\frontend\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:608:12)  
  at /C:/Ways%20Agency/Clients/ways-cards/frontend/.nuxt/dist/server/server.mjs:8361:39  
  at renderFnWithContext (C:\Ways Agency\Clients\ways-cards\frontend\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:847:21)  
  at ssrRenderSlotInner (C:\Ways Agency\Clients\ways-cards\frontend\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:624:21)  
  at Module.ssrRenderSlot (C:\Ways Agency\Clients\ways-cards\frontend\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:614:5)  
  at _sfc_ssrRender (/C:/Ways%20Agency/Clients/ways-cards/frontend/.nuxt/dist/server/server.mjs:3358:27)
[nitro] Error while generating error response FetchError: 302  (/__nuxt_error?url=/dashboard/edit&statusCode=500&statusMessage=Internal+Server+Error&message=Invalid+value+used+as+weak+map+key&description=%3Cpre%3E%3Cspan+class=%22stack%22%3Eat+WeakMap.set+(%3Canonymous%3E)%3C/span%3E%0A%3Cspan+class=%22stack+internal%22%3Eat+normalizePropsOptions+(C:%5CWays+Agency%5CClients%5Cways-cards%5Cfrontend%5Cnode_modules%5C@vue%5Cruntime-core%5Cdist%5Cruntime-core.cjs.js:3966:11)%3C/span%3E%0A%3Cspan+class=%22stack+internal%22%3Eat+createComponentInstance+(C:%5CWays+Agency%5CClients%5Cways-cards%5Cfrontend%5Cnode_modules%5C@vue%5Cruntime-core%5Cdist%5Cruntime-core.cjs.js:6957:23)%3C/span%3E%0A%3Cspan+class=%22stack+internal%22%3Eat+renderComponentVNode+(C:%5CWays+Agency%5CClients%5Cways-cards%5Cfrontend%5Cnode_modules%5C@vue%5Cserver-renderer%5Cdist%5Cserver-renderer.cjs.js:171:22)%3C/span%3E%0A%3Cspan+class=%22stack+internal%22%3Eat+Module.ssrRenderComponent+(C:%5CWays+Agency%5CClients%5Cways-cards%5Cfrontend%5Cnode_modules%5C@vue%5Cserver-renderer%5Cdist%5Cserver-renderer.cjs.js:608:12)%3C/span%3E%0A%3Cspan+class=%22stack%22%3Eat+/C:/Ways%2520Agency/Clients/ways-cards/frontend/.nuxt/dist/server/server.mjs:8361:39%3C/span%3E%0A%3Cspan+class=%22stack+internal%22%3Eat+renderFnWithContext+(C:%5CWays+Agency%5CClients%5Cways-cards%5Cfrontend%5Cnode_modules%5C@vue%5Cruntime-core%5Cdist%5Cruntime-core.cjs.js:847:21)%3C/span%3E%0A%3Cspan+class=%22stack+internal%22%3Eat+ssrRenderSlotInner+(C:%5CWays+Agency%5CClients%5Cways-cards%5Cfrontend%5Cnode_modules%5C@vue%5Cserver-renderer%5Cdist%5Cserver-renderer.cjs.js:624:21)%3C/span%3E%0A%3Cspan+class=%22stack+internal%22%3Eat+Module.ssrRenderSlot+(C:%5CWays+Agency%5CClients%5Cways-cards%5Cfrontend%5Cnode_modules%5C@vue%5Cserver-renderer%5Cdist%5Cserver-renderer.cjs.js:614:5)%3C/span%3E%0A%3Cspan+class=%22stack%22%3Eat+_sfc_ssrRender+(/C:/Ways%2520Agency/Clients/ways-cards/frontend/.nuxt/dist/server/server.mjs:3358:27)%3C/span%3E%3C/pre%3E&data)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Object.errorhandler [as onError] (file:///C:/Ways%20Agency/Clients/ways-cards/frontend/.nuxt/dev/index.mjs:354:16)
    at async Server.nodeHandler (file:///C:/Ways%20Agency/Clients/ways-cards/frontend/node_modules/h3/dist/index.mjs:445:9)

This happens when I try to access the cropper component through a ref.

<cropper
  ref="cropper"
  class="upload-example__cropper"
  check-orientation
  :src="image.src"
  :stencil-props="{
    aspectRatio: 1,
  }"
/>

<script setup>
  const cropper = ref(null);
</script>

Could someone help me out? Is this a bug or something?

If you need anything else, please let me know

[Norserium]

@waysagency, hello. I assume it's not the library specific issue.

When you use the <script setup> syntax top-level bindings are exposed to template.

Therefore when you write:

const cropper = ref(null)

You expose to your template cropper variable. Then you use it as the component and it produces the error, because it's not component at all.

Rename it to cropperRef to testify my assumption.

[waysagency]

Hi @Norserium,

Thanks for the quick solution. This indeed was the problem and your assumption works great.

Thanks!

[Norserium]

@waysagency, you are welcome!