Use of try/catch when using loadModule to catch errors in .vue files

[cgs-matthew-pham]

Hi, instead of using loadModule as described in the documentation, I have created my own function in order to try to catch things such as syntax errors in .vue files.

This works slightly better than loadModule. When I deliberately add an extra { bracket to cause an error, it displays:

SyntaxError: Unexpected token (2:20)

However, it doesn't give me information such as which .vue file and which line it occurs on. Any ideas on how to pick up these errors better?

async function loadVueFile(file) {
  try {
    let component = await loadModule(file, options);
    return component;
  } catch (err) {
    console.log(err);
  }
}

[cgs-matthew-pham]

I think I've just answered my own question, by looking at one of the examples. I needed to put this in my options object:

  log(type, ...args) {
    console.log(type, ...args);
  },

That produces a better console log, in addition to the syntax error:

error parse script ./components/add.vue
   8 |             sum.value = parseInt(num1.value) + parseInt(num2.value);
   9 |             alert(`The answer is ${sum.value}`)
> 10 |         },
     |          ^ Unexpected token (10:9)
  11 |         const equation = Vue.computed(() => {
  12 |             return `${num1.value} + ${num2.value}`
  13 |         });