Handontable/Vue - error when running in production

Tags: #<Tag:0x00007efc647361a0>
#1

Hi,

I’m using Handsontable with the Vue wrapper (versions 8.0.0 and 5.0.1). I have created a test component from the documentation: https://handsontable.com/docs/8.0.0/frameworks-wrapper-for-vue-installation.html

When I build my js and css assets with npm run dev (development mode) this works as expected and I can see and interact with the table. However, when I run in production mode (npm run production) an error is logged to the console:

app.js:2 DOMException: Failed to execute 'insertBefore' on 'Node': This node type does not support this method.
    at new H (http://127.0.0.1:8000/js/app.js:2:1247871)
    at new dg.Core (http://127.0.0.1:8000/js/app.js:2:860935)
    at a.hotInit (http://127.0.0.1:8000/js/app.js:2:1224790)
    at a.mounted (http://127.0.0.1:8000/js/app.js:2:1227662)
    at Ve (http://127.0.0.1:8000/js/app.js:2:1700826)
    at Zt (http://127.0.0.1:8000/js/app.js:2:1714678)
    at Object.insert (http://127.0.0.1:8000/js/app.js:2:1709730)
    at C (http://127.0.0.1:8000/js/app.js:2:1749473)
    at On.__patch__ (http://127.0.0.1:8000/js/app.js:2:1750831)
    at On.e._update (http://127.0.0.1:8000/js/app.js:2:1723171)

and the table does not display.

My application is built in Laravel (v7.25) and I use Laravel-mix to build the assets. My Vue version is 2.6.12.

Any ideas?

Thanks,
Martin.

#2

Hi Martin,

This issue sounds similar to https://github.com/handsontable/vue-handsontable-official/issues/189

Do you the mounted() hook?

#3

Hi Aleksandra,

Thanks for the reply. I tried your suggestion, but no joy. However, I had a look at your GitHub issue tracker and I believe my problem is related to issue 188 https://github.com/handsontable/vue-handsontable-official/issues/188

I will work around for the time being, and wait for an update to the Vue wrapper.

Thanks,
Martin.

#4

I will keep you updated with the fix of https://github.com/handsontable/vue-handsontable-official/issues/188, Martin.

#5

Hi Martin,

we just released a new version of the Vue wrapper - 5.1.0 - that solved the mentioned issue https://github.com/handsontable/vue-handsontable-official/issues/188

#6

Hi Alexsandra,

I have just downloaded, installed, and production built with the updated wrapper and everything seems to be working well!

Many thanks,
Martin.

#7

Great. Thank you for the feedback.

If you’d need anything please feel free to email me - support@handsontable.com

#8