[BUG] TypeError: can't access property "isCE", currentRenderingInstance is null

[Veys Aliyev]

<template>
  <Grid :length="orderList.length" :page-provider="pageItems" :page-size="12">
    <template #probe>
      <Order :order="orderList[0]" />
    </template>
    <template #default="{ item, style, index }">
      <div :style="style">{{ item }} {{ index }}</div>
    </template>
    <template #placeholder="{ index, style }">
      <div :style="style">Placeholder {{ index }}</div>
    </template>
  </Grid>
</template>

<script lang="ts">
import Order from "/path/to/my/component";
import Grid from "vue-virtual-scroll-grid";

return {
  components: { Order, Grid },
  mounted() {
    // getting from api
  },
  methods: {
    async pageItems(pageNumber: number, pageSize: number): Promise<unknown[]> {
      return Array(pageSize).fill("x");
    }
  }
}
</script>

And i getting an error:

Uncaught (in promise) TypeError: can't access property "isCE", currentRenderingInstance is null
    renderSlot runtime-core.esm-bundler.js:5799
    _sfc_render vue-virtual-scroll-grid.js:6755
    renderComponentRoot runtime-core.esm-bundler.js:424
    componentUpdateFn runtime-core.esm-bundler.js:4189
    run reactivity.esm-bundler.js:160
    setupRenderEffect runtime-core.esm-bundler.js:4315
    mountComponent runtime-core.esm-bundler.js:4098
    processComponent runtime-core.esm-bundler.js:4056
    patch runtime-core.esm-bundler.js:3651
    mountChildren runtime-core.esm-bundler.js:3847
    mountElement runtime-core.esm-bundler.js:3756
    processElement runtime-core.esm-bundler.js:3728
    patch runtime-core.esm-bundler.js:3648
    mountChildren runtime-core.esm-bundler.js:3847
    mountElement runtime-core.esm-bundler.js:3756
    processElement runtime-core.esm-bundler.js:3728
    patch runtime-core.esm-bundler.js:3648
    componentUpdateFn runtime-core.esm-bundler.js:4196
    run reactivity.esm-bundler.js:160
    setupRenderEffect runtime-core.esm-bundler.js:4315
    mountComponent runtime-core.esm-bundler.js:4098
    processComponent runtime-core.esm-bundler.js:4056
    patch runtime-core.esm-bundler.js:3651
    componentUpdateFn runtime-core.esm-bundler.js:4266
    run reactivity.esm-bundler.js:160
    callWithErrorHandling runtime-core.esm-bundler.js:6656
    flushJobs runtime-core.esm-bundler.js:6895

Node: 16.9.1
Vue: 3.2.12
vue-virtual-scroll-grid: 1.2.1

[Roc Wong]

I managed to convert your code snippet to a working demo at https://codesandbox.io/s/vue-virtual-scroll-grid-issue-12-zzvdr?file=/App.vue

However, I couldn't replicate the issue in you described.

I notice your code snippet has not styles. Presumably you omit it for simplicity, but please note that as an UI component, vue-virtual-scroll-grid heavily relies on CSS, perticully the CSS grid feature. Without proper style set on the container and item elements, it may behave weirdly.

Also note that you gotta export default your component instead of return it.

[Veys Aliyev]

I managed to convert your code snippet to a working demo at https://codesandbox.io/s/vue-virtual-scroll-grid-issue-12-zzvdr?file=/App.vue

However, I couldn't replicate the issue in you described.

I notice your code snippet has not styles. Presumably you omit it for simplicity, but please note that as an UI component, vue-virtual-scroll-grid heavily relies on CSS, perticully the CSS grid feature. Without proper style set on the container and item elements, it may behave weirdly.

Also note that you gotta export default your component instead of return it.

return is mistake. i use export default

[Veys Aliyev]

It's my bad. I used Custom Array variable. And i reinstalled all packages and its works.