Handontable/Vue - error when running in production

Tags: #<Tag:0x00007fbe83fbd558>

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.

Hi Martin,

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

Do you the mounted() hook?

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.

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

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

Hi Alexsandra,

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

Many thanks,
Martin.

Great. Thank you for the feedback.

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