Uncaught TypeError: Cannot read properties of null (reading 'isCE')

[cschulze86]

Hello,

Apologies if this is incredibly stupid, but I have been digging through all available resources and stack overflow answers, and haven't been able to work out what's going on here.

Uncaught TypeError: Cannot read properties of null (reading 'isCE') at renderSlot (runtime-core.esm-bundler.js:2812:1) at eval (sortablejs-vue3.es.js:102:1) at normalizeChildren (runtime-core.esm-bundler.js:7001:1) at createBaseVNode (runtime-core.esm-bundler.js:6812:1) at _createVNode (runtime-core.esm-bundler.js:6889:1) at createVNodeWithArgsTransform (runtime-core.esm-bundler.js:6766:1) at createBlock (runtime-core.esm-bundler.js:6738:1) at Proxy.eval (sortablejs-vue3.es.js:97:1) at renderComponentRoot (runtime-core.esm-bundler.js:815:1) at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5704:1)

Here is the component, which was working fine before I tried using Sortable.:

<script>
// import SortableRow from "@/components/SortableRow.vue";
import {Sortable} from "sortablejs-vue3";

export default {
  name: 'SortableTable',
  components: {
    // SortableRow,
    Sortable,
  },
  props: {
    report: {
      type: Array,
      required: true
    }
  }
}
</script>

<style scoped>
  /* ... styles ... */
</style>

<template>
  <table>
    <thead>
      <tr>
        <th>Handle</th>
        <th>Type</th>
        <th>Dataset</th>
        <th>Label</th>
        <th>Disags</th>
        <th>Chart</th>
      </tr>
    </thead>
    <Sortable :list="report" item-key="id" tag="tbody">
      <template #item="value">
        <tr class="draggable" :key="value.id">
          <td><i class="fa-solid fa-bars"></i></td>
          <td>{{ value.type }}</td>
          <td></td> <!-- dataset -->
          <td>{{ value.label }}</td>
          <td></td> <!-- disags -->
          <td></td> <!-- chart -->
        </tr>
      </template>
    </Sortable>
  </table>
</template>

and this is the main App.vue:

<template>
  <sortable-table :report="report"></sortable-table>
</template>

<script>
import SortableTable from "@/components/SortableTable.vue";
import { report } from "@/main";

export default {
  name: 'App',
  data() {
    return {
      report: report
    }
  },
  components: {
    SortableTable
  }
}
</script>

<style>
  /* ... styles ... */
</style>

I'm really struggling to work out what's going on here, and any support you can offer would be greatly appreciated.

[cschulze86]

Hello, managed to solve it myself. It seems multiple copies of Vue were being used. I updated the contents of my vue.config.js file to the following:

const path = require('path');
const { defineConfig } = require('@vue/cli-service');

module.exports = defineConfig({
  transpileDependencies: true,

  chainWebpack: config => {
    config.resolve.symlinks(false);
    config.resolve.alias.set('vue', path.resolve('./node_modules/vue'));
  }
});