Document is not defined with Nuxt.js

[JoepOomens]

When I use the Tree component in Nuxt.js, I get the 'document is not defined' error when opening the page. I guess it has to do with the SSR in Nuxt, but the error still exists with the tag.

Has somebody solved this issue?

<template>
	<no-ssr>
		<Tree :data="list" draggable="draggable" cross-tree="cross-tree">
			<div slot-scope="{ data, store }">
				<template v-if="!list.isDragPlaceHolder"
					><b v-if="list.children && list.children.length" @click="store.toggleOpen(list)">
						{{ list.open ? '-' : '+' }} </b
					><span>{{ list.text }}</span>
				</template>
			</div>
		</Tree>
	</no-ssr>
</template>

<script>
import { Tree} from 'vue-draggable-nested-tree';
export default {
	components: {
		Tree,
	},
	computed: {
		list() {
			return [
				{ text: '123' },
				{ text: '456', children: [{ text: '456-123' }] },
				{
					text: '789',
					children: [
						{
							text: '789-123',
							children: [{ text: '789-123-123' }],
						},
						{
							text: '789-456',
						},
					],
				},
			];
		},
	},
};
</script>```

[phphe]

disable it in ssr

[JoepOomens]

I disabled it already using that no-ssr tag, right? Or is there another way I don't know?

[phphe]

I need error detail

[JoepOomens]

The errorpage mentiones the following:

ReferenceError: document is not defined.
node_modules\vue-draggable-nested-tree\dist\vue-draggable-nested-tree.cjs.js line 509:1

if (!document.elementsFromPoint) {
  document.elementsFromPoint = elementsFromPoint;
}

[phphe]

https://stackoverflow.com/a/50458090

[JoepOomens]

I didn't looked into it, but now I did. I have now the following code (as mentioned in the link you sent):

DraggableTree.vue
`

<script> import { DraggableTree } from 'vue-draggable-nested-tree'; export default { components: { // eslint-disable-next-line vue/no-unused-components DraggableTree, }, mounted() { // exists only on client: console.log(DraggableTree); }, }; </script>`

index.vue
export default { components: { DraggableTree: () => import('@/components/DraggableTree.vue'), } }

Now I get the following two errors, the first one in the browser and the second one in the terminal of the "npm run dev" script

1. NuxtServerError: render function or template not defined in component: DraggableTree
2. [Vue warn]: Failed to resolve async component: () => webpack_require.e(/*! import() / 0).then(webpack_require.bind(null, /! @/components/DraggableTree.vue */ "./components/DraggableTree.vue"))
   Reason: ReferenceError: document is not defined

[phphe]

export default { components: { DraggableTree: () => import('vue-draggable-nested-tree').then(m => m.DraggableTree), } }

[JoepOomens]

TypeError: Cannot read property '__esModule' of undefined :(

[phphe]

not clear

[transtone]

use nuxt plugin to set it as a globle component will solve the problem.

[phphe]

Thank you for your use. I published he-tree-vue. vue-draggable-nested-tree will no longer be updated.
try this https://he-tree-vue.phphe.com/