fix: fix tsx compilation (#4894)

closes #4892
closes #4893

packages/@vue/cli-plugin-typescript/__tests__/tsPluginBabel.spec.js

@@ -1,6 +1,7 @@
 jest.setTimeout(30000)
 
 const Service = require('@vue/cli-service/lib/Service')
+const create = require('@vue/cli-test-utils/createTestProject')
 const { assertServe, assertBuild } = require('./tsPlugin.helper')
 
 test('using correct loader', () => {
@@ -30,3 +31,25 @@ const creatorOptions = {
 
 assertServe('ts-babel-serve', creatorOptions)
 assertBuild('ts-babel-build', creatorOptions)
+
+test('tsx-build', async () => {
+  const project = await create('tsx', creatorOptions)
+  await project.write('src/components/HelloWorld.vue', `
+  <script lang="tsx">
+  import Vue, { CreateElement } from 'vue'
+  import Component from 'vue-class-component'
+
+  @Component
+  export default class World extends Vue {
+    render (h: CreateElement) {
+      return (
+        <p>This is rendered via TSX</p>
+      )
+    }
+  }
+  </script>
+  `)
+
+  const { stdout } = await project.run('vue-cli-service build')
+  expect(stdout).toMatch('Build complete.')
+})

packages/@vue/cli-plugin-typescript/index.js

@@ -22,12 +22,13 @@ module.exports = (api, projectOptions) => {
     const tsxRule = config.module.rule('tsx').test(/\.tsx$/)
 
     // add a loader to both *.ts & vue<lang="ts">
-    const addLoader = ({ loader, options }) => {
-      tsRule.use(loader).loader(loader).options(options)
-      tsxRule.use(loader).loader(loader).options(options)
+    const addLoader = ({ name, loader, options }) => {
+      tsRule.use(name).loader(loader).options(options)
+      tsxRule.use(name).loader(loader).options(options)
     }
 
     addLoader({
+      name: 'cache-loader',
       loader: require.resolve('cache-loader'),
       options: api.genCacheConfig('ts-loader', {
         'ts-loader': require('ts-loader/package.json').version,
@@ -38,6 +39,7 @@ module.exports = (api, projectOptions) => {
 
     if (useThreads) {
       addLoader({
+        name: 'thread-loader',
         loader: require.resolve('thread-loader'),
         options:
           typeof projectOptions.parallel === 'number'
@@ -51,11 +53,13 @@ module.exports = (api, projectOptions) => {
         // TODO: I guess the intent is to require the `babel-loader` provided by the Babel vue
         // plugin, but that means we now rely on the hoisting. It should instead be queried
         // against the plugin itself, or through a peer dependency.
+        name: 'babel-loader',
         // eslint-disable-next-line node/no-extraneous-require
         loader: require.resolve('babel-loader')
       })
     }
     addLoader({
+      name: 'ts-loader',
       loader: require.resolve('ts-loader'),
       options: {
         transpileOnly: true,