SFC without a script tag show an error when trying to import
See original GitHub issueInfo
- Platform: macOS
- Vetur version:0.18.1
- VS Code version: 1.33.0
Problem
Components without a script tag and an export are flagged with an error:
File ‘…import_example/src/components/Simple.vue’ is not a module. Vetur(2306)
<!-- src/components/Simple.vue -->
<template>
<h1>No script tag in this component</h1>
</template>
// App.vue
// ...
import Simple from "./components/Simple.vue";
// ...
Reproducible Case
Here is the diff to a brand new project created with vue-cli:
diff --git a/src/App.vue b/src/App.vue
index 7633616..04a51d9 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,17 +1,17 @@
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
- <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
+ <Simple/>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
-import HelloWorld from './components/HelloWorld.vue';
+import Simple from "./components/Simple.vue";
@Component({
components: {
- HelloWorld,
+ Simple,
},
})
export default class App extends Vue {}
diff --git a/src/components/Simple.vue b/src/components/Simple.vue
new file mode 100644
index 0000000..a7ad133
--- /dev/null
+++ b/src/components/Simple.vue
@@ -0,0 +1,3 @@
+<template>
+ <h1>No script tag in this component</h1>
+</template>
Here is the repo that shows the problem:
Issue Analytics
- State:
- Created 4 years ago
- Reactions:44
- Comments:43 (7 by maintainers)
Top Results From Across the Web
Problems with Vue 3.2 <script setup> tag and TypeScript types
The help docs say I do not need to import { defineProps } from "vue"; . But if I don't do the import...
Read more ><script setup> | Vue.js
<script setup> is a compile-time syntactic sugar for using Composition API inside Single-File Components (SFCs). It is the recommended syntax if you are ......
Read more >Vue 3: Support new <script setup> without ref sugar - YouTrack
When using it with lang='ts' , vue dependencies are not resolved, all appears in red and no autocompletion, whilte the rest of imports...
Read more >Explaining The New script setup Type in Vue 3 - LearnVue
In the Composition API, we're used to having to create our setup method and then return anything that we want exposed. Something like...
Read more >Common mistakes to avoid while working with Vue.js
Looking for a front-end framework to try out, I started with React and then ... #1: import full build in JavaScript file import...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Until this is fixed adding the following worked for me:
As @mpvosseller suggested, adding below at the bottom of the file fixes the problem.
NB: Am using TypeScript. But js counterpart should work just fine