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.

SFC without a script tag show an error when trying to import

See original GitHub issue
  • I have searched through existing issues
  • I have read through docs
  • I have read FAQ

Info

  • 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:

https://github.com/uri/vetur-import-example

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:44
  • Comments:43 (7 by maintainers)

github_iconTop GitHub Comments

17reactions
mpvossellercommented, May 10, 2019

Until this is fixed adding the following worked for me:

<script>
export default {}
</script>
9reactions
dannysofftiecommented, Mar 2, 2020

As @mpvosseller suggested, adding below at the bottom of the file fixes the problem.

<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
    //
});
</script>

NB: Am using TypeScript. But js counterpart should work just fine

Read more comments on GitHub >

github_iconTop 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 >

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