<script lang="tsx"> Compilation error

[ccqiuqiu]

Version

3.0.0-beta.14

Reproduction link

/~https://github.com/ccqiuqiu/vue-cli3-test

Steps to reproduce

1.使用vue-cli创建一个项目，选择babel、ts
2.修改home.vue，增加一个component组件,如下：

<template>
  <div class="home">
    <img src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js   TypeScript App"/>
    <component :is="component"></component>
  </div>
</template>

<script lang="tsx">
import { Component, Vue } from 'vue-property-decorator';
import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src

@Component({
  components: {
    HelloWorld,
  },
})
export default class Home extends Vue {
  private component: any = {
    render: (h: any) => <div>dddd</div>
  }
}
</script>

3. 修改tsconfig.json中的target为es5
   4.运行 npm run serve

What is expected?

希望能正常渲染jsx

What is actually happening?

异常信息

> vue-cli3@0.1.0 serve /Users/cc/Desktop/node/vue-cli3
> vue-cli-service serve

 INFO  Starting development server...
Starting type checking service...
Using 1 worker with 2048MB memory limit
 94% after seal

 ERROR  Failed to compile with 1 errors                                                                                                                                         09:51:42

 error  in ./src/views/Home.vue?vue&type=script&lang=tsx

Syntax Error: Unterminated regular expression (13:35)

  11 |         super(...arguments);
  12 |         this.component = {
> 13 |             render: (h) => dddd < /div>
     |                                    ^
  14 |         };
  15 |     }
  16 | };


 @ ./src/views/Home.vue?vue&type=script&lang=tsx 1:0-268 1:284-287 1:289-554 1:289-554
 @ ./src/views/Home.vue
 @ ./src/router.ts
 @ ./src/main.ts
 @ multi (webpack)-dev-server/client/index.js (webpack)/hot/dev-server.js ./src/main.ts

No type errors found
Version: typescript 2.8.3
Time: 3320ms

---

此异常通常在第一次启动的时候出现，重启有时候会正常，但是修改代码后，再重启又可能出现异常。

[u3u]

This BUG has been fixed in beta.12 (#1367)
Why does beta.13 still appear?

[ccqiuqiu]

这个bug在beta.14上依然存在，而且很奇怪的是，多执行几次npm run serve，有时候正常，有时候不正常
node版本是8.11.0 系统是mac os11.13.4

[yyx990803]

This is a bug in ts-loader using incorrectly cached loader options... working on a PR soon

[johnnyreilly]

Hey @yyx990803,

The change was merged and released with ts-loader 4.3.1 last night. Thanks very much for your work!

That's the good news. However, I'm afraid there's some bad too. It looks like the changes to the getLoaderOptions function have caused issues for the fork-ts-checker-webpack-plugin. With these changes in place, the following vue integration tests have started failing:

https://travis-ci.org/Realytics/fork-ts-checker-webpack-plugin/jobs/387303861

I've done a test and it is the amended getLoaderOptions that causes the failures. I'm afraid I'm no vue expert. Would you be able to assist? I should say that the fork-ts-checker-webpack-plugin project is not mine but @piotr-oles has granted me the relevant rights and so I should be able to assist with merging any PRs I hope.

I'm assuming that this is fixable; but is you'd like me to publish another version of ts-loader that reverts your changes then do let me know. I'm happy to help! 🌻

[yyx990803]

@johnnyreilly I'll look into this Monday.

[johnnyreilly]

Awesome! Thanks so much.

[yyx990803]

Edit: moved to ts-loader's repo
TypeStrong/ts-loader#782 (comment)

[yyx990803]

Closing this one as the original issue is fixed in ts-loader 4.3.1 and the integration issue only affects vue-loader 14.