How to import a component? about typescript-template HOT 9 CLOSED

With relative path I got this error:

error TS2307: Cannot find module './../components/MyComponent.vue'.

import:

import MyComponent from "./../components/MyComponent.vue"

from typescript-template.

Does it work by importing with a relative path instead of the alias ~components?

from typescript-template.

I tried also importing without the vue extension:

import MyComponent from "./../components/MyComponent"

error:

error TS2307: Cannot find module './../components/MyComponent'.

from typescript-template.

Thanks for taking a look @Atinux

I don't quite understand appendTSSuffixTo:
https://github.com/TypeStrong/ts-loader#appendtssuffixto-regexp-default

Also, every example I've read through uses esModule:true on the vue-loader:
https://github.com/vuejs/vue-class-component/blob/master/example/webpack.config.js#L24

I just don't have that much webpack experience, so trying to override the build config in nuxt.config.js just turns into guessing for me.

from typescript-template.

Do you think adding typings like this:

declare module '*.vue' {
	import Vue = require('vue')
	const value: Vue.ComponentOptions<Vue>
	export default value
}

will have any effect?

from typescript-template.

@jvbianchi no, it's not a type error...

from typescript-template.

@jvbianchi Try something for me:

add a components/Foo.vue with the following contents:

<template>
  <div>
    Hi
  </div>
</template>
<script lang="ts">
export default {

}
</script>

import it in index.vue with

import Foo from "~components/Foo"

and make sure to add it to

@Component({
  components: {
    Foo
  },

If the dev server is running, stop then yarn dev again.

Tell me if that works...

I'm thinking I've seen the following behaviors:

1. When you add a new component, you need to stop then restart the dev server
2. If you import without actually using a component, it throws a "module not found". Do at least a console.log(Foo) makes this go away.
3. I believe a .vue for TS need a minimal script tag that exports at least an object.

Those are bizarre behaviors IMO, but I don't have any answers...

from typescript-template.

@johnlindquist when you add:

<script lang="ts">
export default {

}
</script>

to any component it starts working.
I tested with:

import MyComponent from "./../components/MyComponent.vue"
import Foo from "~components/Foo.vue";

// and

import MyComponent from "./../components/MyComponent"
import Foo from "~components/Foo";

In both cases work as expected.

As you said:

1. It works even without restarting the server.
2. If you don't use the component I got the error:

error TS2307: Cannot find module './../components/Foo.vue'.

but if I console.log(Foo) it works.

from typescript-template.

Great, thanks for the help.

from typescript-template.