[Vuejs]-Typescript Vue class-based components throwing error Cannot set property 'render' of undefined in Laravel mix

My workmate helps me solve this quite a difficult case.

What we do is add in webpack.mix.js to ts-loader options object. We need append TS suffix to Vue components. Now it is:

rules: [
  {
    test: /\.tsx?$/,
    loader: 'ts-loader',
    exclude: /node_modules/,
    options: {
      appendTsSuffixTo: [/\.vue$/]
    }
  }
]

What we do next is change tsconfig.js compilerOptions.module to be commonjs instead of es2015, like this:

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        // the rest remain unchanged
    }
}

As last thing all of imports/require Vue components must be the default import, I used just import in require.context but it must be changed to such:

protected registerComponents(): void {
  const components = require.context('./', true, /\.vue$/i);

  components.keys().forEach((componentPath) => {
    // @ts-ignore
    const componentName = componentPath
      .split('/').pop() // full component name
      .split('.').slice(0, 1).shift(); // component name without extension

    Vue.component(
      _.kebabCase(componentName),
      components(componentPath).default
    );
  })
}

This solves my problem, thanks to Adrian for your time and give working solution 🙂