HTMLElement is not defined - Nativescript-vue

The solution that @sidheart pointed out works but it will not let you observe the store. The error is triggered because NativeScript does not have a DOM and therefore has no types for HTMLElement. A temporary solution is to add the line below to the object defined by new webpack.DefinePlugin({}) in the file webpack.config.js:

HTMLElement: function() {
 return false;
},

so that the full object looks like this:

new webpack.DefinePlugin({
  'global.TNS_WEBPACK': 'true',
  TNS_ENV: JSON.stringify(mode),
  process: 'global.process',
  HTMLElement: function() {
    return false;
  },
}),


Thanks to Brandon Gohsman for showing this solution in his article.


When you create a project using:

vue init nativescript-vue/vue-cli-template <project-name>

Don't install vue-devtools. I think it has something to do with vue-devtools trying to access the DOM which doesn't exist in Nativescript.


I found the solution, update your main.js file

import store from './store' // <= this should be before VueDevtools 
import VueDevtools from 'nativescript-vue-devtools';