Vue-cli: vue/ts - separation of concerns (vue-cli 3 beta 15)

[bc3]

Version

3.0.0-beta.15

Reproduction link

https://codesandbox.io/s/j1wvnyn68w

Steps to reproduce

setup a new cli project using beta 15 & ui

add Test.vue

<template>
  <div>
      <p>TEST</p>
  </div>
</template>
<script lang="ts">
export { default } from './Test';
</script>

add Test.ts

import Vue from 'vue';
import { Component } from 'vue-property-decorator';
@Component({
    name: 'test',
    components: {

    },
})
export default class Test extends Vue {
}

and in the router change the home route to this test component or add another router

e.g. your app.ts

<template>
  <div id="app">
    <test/>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import * as Test from '@/components/Test.vue';

@Component({
  components: {
    Test,
  },
})
export default class App extends Vue {}
</script>

What is expected?

that the page is rendered and test is displayed

What is actually happening?

componentNormalizer.js?2877:24 Uncaught TypeError: Cannot set property 'render' of undefined
at normalizeComponent (componentNormalizer.js?2877:24)
at eval (Test.vue?2500:8)
at Module../src/components/Test.vue (app.js:3768)
at __webpack_require__ (app.js:722)
at fn (app.js:99)
at eval (index.ts:6)
at Module../src/router/index.ts (app.js:3816)
at __webpack_require__ (app.js:722)
at fn (app.js:99)
at eval (main.ts:6)

---

when using the ts code inside the vue file it works as expected, but i want to have a split vue and ts file

[coldino]

This does work, but only if you use a different filename for the .ts file
or put it in a separate directory.

On Thu, 14 Jun 2018, 20:54 Ben Croughs, [e-mail] wrote:

Version

3.0.0-beta.15
Reproduction link

https://codesandbox.io/s/j1wvnyn68w
Steps to reproduce

setup a new cli project using beta 15 & ui

add Test.vue

TEST

add Test.ts

import Vue from 'vue';
import { Component } from 'vue-property-decorator';

@component https://github.com/component({
name: 'test',
components: {

},

})
export default class Test extends Vue {

}

and in the router change the home route to this test component or add
another router
What is expected?

that the page is rendered and test is displayed
What is actually happening?

componentNormalizer.js?2877:24 Uncaught TypeError: Cannot set property
'render' of undefined
at normalizeComponent (componentNormalizer.js?2877:24)
at eval (Test.vue?2500:8)
at Module../src/components/Test.vue (app.js:3768)
at webpack_require (app.js:722)
at fn (app.js:99)
at eval (index.ts:6)
at Module../src/router/index.ts (app.js:3816)
at webpack_require (app.js:722)
at fn (app.js:99)

at eval (main.ts:6)

when using the ts code inside the vue file it works as expected, but i
want to have a split vue and ts file

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/vuejs/vue-cli/issues/1576, or mute the thread
https://github.com/notifications/unsubscribe-auth/AbCGJQN4EikD0fH73zDQ5BBnksDEb0o0ks5t8r-SgaJpZM4UokIH
.

[yyx990803]

FYI you can just do <script lang="ts" src="./Test.ts"></script>

[bc3]

hey thanks for the 2 answers both work, but you will also need to add the ts-loader as a dev dependency. What i find weird since alle webpack loaders were removed from the packages, could that mean that the ts-loader was not added when using the vue-ui ?
I would however go with the solution of Evan, since that means I do not need to rename all my ts files. And i find it very clean to have a xxx.vue and a xxx.ts file next to each other

[coldino]

If I try using Evan's solution I can no longer import the .vue from other files without editor- and built-time errors. The app still works, however. I'm using VSCode with Vetur and TSLint extensions.

I've made a small repro to show the problem: https://github.com/coldino/test-vue-script-import
It moves the code from HelloWorld.vue out to HelloWorld.ts. I get the same error if I use a different name for the TypeScript file.

npm run serve output:

ERROR in C:/Work/Temp/test-vue-script-import/src/App.vue
10:24 File 'C:/Work/Temp/test-vue-script-import/src/components/HelloWorld.vue' is not a module.
     8 | <script lang="ts">
     9 | import { Component, Vue } from 'vue-property-decorator';
  > 10 | import HelloWorld from './components/HelloWorld.vue';
       |                        ^
    11 |
    12 | @Component({
    13 |   components: {
ERROR in C:/Work/Temp/test-vue-script-import/src/views/Home.vue
10:24 File 'C:/Work/Temp/test-vue-script-import/src/components/HelloWorld.vue' is not a module.
     8 | <script lang="ts">
     9 | import { Component, Vue } from 'vue-property-decorator';
  > 10 | import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
       |                        ^
    11 |
    12 | @Component({
    13 |   components: {
No lint errors found
Version: typescript 2.9.2, tslint 5.10.0

I didn't understand the comment about ts-loader needing to be added to the dev dependencies. It's already picked up indirectly via @vue/cli-plugin-typescript and adding it myself makes no difference. Is there some extra config needed that I can't find?

[LinusBorg]

It seems that this issue is actually a duplicate of this one: #1104, and the source of the problem is found upstream in fork-ts-checker-webpack-plugin.

We already opened an issue, but a solution is not in immediate sight.

A workaround is described here: https://github.com/Realytics/fork-ts-checker-webpack-plugin/issues/111#issuecomment-401519194

Further discussion should be happening in the original issue.