I noticed an issue with TypeScript, not sure how to resolve this.

[SeanJM]

When rendered with ts-loader and babel!ts, there is a non existent pointer being used for babel_helper_vue_jsx_merge_props_1, that pointer is babel_helper_vue_jsx_merge_props_1.default, babel_helper_vue_jsx_merge_props_1 returns the correct function, where as babel_helper_vue_jsx_merge_props_1.default returns undefined.

.tsconfig

{
  "compilerOptions": {
    "jsx": "preserve",
    "module": "commonjs",
    "outDir": "bin/",
    "sourceMap": true,
    "target": "es5"
  },
  "include": [
    "src/typings/**/*.ts"
  ],
  "files": [
    "./src/app/app.tsx"
  ]
}

webpack.config.js

module.exports = {
  entry: './src/app/app.tsx',
  output: {
    filename: 'bin/bundle.js'
  },
  resolve: {
    // Add `.ts` and `.tsx` as a resolvable extension.
    extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js']
  },
  module: {
    loaders: [
      // all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`
      {
        test: /\.tsx?$/,
        loader: 'ts-loader'
      },
      {
        test: /\.tsx$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel!ts',
      }
    ]
  }
};

[SeanJM]

Editing 'babel-helper-vue-jsx-merge-props' to export with default fixes it:

module.exports = { 
  default : function mergeJSXProps (objs) { ... }
}

[SeanJM]

Installing $ npm install --save-dev babel-preset-es2015 seems to fix the issue, except now I get this error with no answer online on how to resolve it: Left side of comma operator is unused and has no side effects. The error does away when the spread operator is not used.

babel.rc

{
  "presets": [],
  "plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs"]
}

The line from the compiled code looks like this:

Vue.component('todoApp', {
        render: function (h) {
                return h("div", (0, _babelHelperVueJsxMergeProps2.default)([{ "class": "this" }, { class: "that" }]), []);
        }
});

[SeanJM]

This is the correct configuration to use for a TypeScript and JSX with Vue:

webpack.config.js:

module.exports = {
  entry: "./src/app.tsx",
  output: {
    filename: "bin/bundle.js"
  },
  resolve: {
    // Add '.ts' and '.tsx' as a resolvable extension.
    extensions: ["", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
  },
  module: {
    loaders: [
      // It's important to run 'babel' first this will avoid a compilation error
      { test: /\.tsx?$/, loader: "babel" },
      // Run ts loader to transform our typescript into JS
      { test: /\.tsx?$/, loader: "ts-loader" }
    ]
  },
  // If you want to load 'vue' as an external, and not include it in your bundle
  // simply add it to the array.
  externals : []
};

.babelrc

{
  "presets": [],
  "plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs"]
}

Bash

npm i -S \
@types/core-js \
vue \
typescript \
ts-loader \
webpack \
babel \
babel-core \
babel-loader \
babel-plugin-syntax-jsx \
babel-plugin-transform-es2015-modules-commonjs \
babel-plugin-transform-vue-jsx \
babel-helper-vue-jsx-merge-props