question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

typescript building error when import .vue file with separate .ts file

See original GitHub issue

Version

3.0.0-beta.6

Reproduction link

https://github.com/troy351/vue-cli-demo

Steps to reproduce

clone the repo, run

npm install
npm run serve

What is expected?

run success

What is actually happening?

error File '/src/components/HelloWorld.vue' is not a module. in App.vue


use inline script (not put script into a separate file) works fine

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:9
  • Comments:28 (16 by maintainers)

github_iconTop GitHub Comments

41reactions
troy351commented, May 16, 2018

@shenron add // @ts-ignore before each import '*.vue' could be a temporary solution.

// @ts-ignore
import HelloWorld from '@/components/HelloWorld/HelloWorld.vue'; 
17reactions
troy351commented, May 16, 2018

@posva not exactly the same.

I do have file shims.d.ts which declare *.vue files

declare module '*.vue' {
  import Vue from 'vue'
  export default Vue
}

and it works like this

// a.vue
<script lang="ts">
  import Vue from 'vue'

  export default Vue.extend({
    name: 'a',
  })
</script>

// b.vue
<script lang="ts">
  import A from './a.vue'
</script>

but the code below throw an error

// a.vue
<script lang="ts" src="./a.ts">
</script>

// a.ts
 import Vue from 'vue'

  export default Vue.extend({
    name: 'a',
  })

// b.vue
<script lang="ts">
  import A from './a.vue'
</script>
Read more comments on GitHub >

github_iconTop Results From Across the Web

VSCode showing "cannot find module" TS error for .vue import ...
In your project workspace, bring up the command palette with Ctrl + Shift + P (macOS: Cmd + Shift + P). Type built...
Read more >
import module error with Vue 2.0 and typescript
I'm using Typescript and Vue JS. The compiler works fine but Pycharm show an error in import : My webpack config:
Read more >
How To Use TypeScript with Vue Single File Components
In this tutorial, you will use @vue/cli to generate a new Vue.js 2.0 application with TypeScript and build a Single-File Component (SFC).
Read more >
TypeScript unable to locate module (vue file) when trying to ...
It turns out TypeScript will not recognize Vue files without adding the ".vue" extension in the path when importing. I will need to...
Read more >
TypeScript - Astro Documentation
You can import .ts and .tsx files in your Astro project, write TypeScript code ... can use a separate script to check for...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found