Vue Render HTML - You may need an additional loader to handle the result of these loaders

Question

I'm trying to render HTML dynamically in Vue (javascript) and I'm getting this error, does anyone know how to fix it?

Module parse failed: Unexpected token (224:36)
File was processed with these loaders:
 * ./node_modules/cache-loader/dist/cjs.js
 * ./node_modules/vue-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.

This is the code that generates the above error:

    headings: {
       id: 'ID',
       selected: function (h) {
          return  <b-form-checkbox v-model={this.checkedAll} onChange={this.selectAll}>
                </b-form-checkbox>
       }
    }

Answer 1

I solved the problem by installing babel

https://github.com/vuejs/babel-plugin-transform-vue-jsx

babel.config.js

    module.exports = {
     presets: [
      '@vue/app'
     ]
    }