vetur: SFC without a script tag show an error when trying to import
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:
About this issue
- Original URL
- State: closed
- Created 5 years ago
- Reactions: 44
- Comments: 43 (7 by maintainers)
Commits related to this issue
- Shim doesn't seem to work; replace (vuejs/vetur#1187) — committed to rossjrw/gallifreyo by rossjrw 4 years ago
- Fix SFC without a script tag show an error, Fix #1187. — committed to yoyo930021/vuter by yoyo930021 4 years ago
- Fix SFC without a script tag show an error, Fix #1187. — committed to yoyo930021/vuter by yoyo930021 4 years ago
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
And Vetur show the same error if you split code into files like :
Output Vetur
...logout.vue' is not a module. Vetur(2306) [1, 1]
Any chance we could see a fix here soon?
Probably because
templateInterpolationService
has been disabled. Try adding the following setting in VSCode, do you see the problem again?Second that. Error still showing for importing .vue files with or without script tag. Doesn’t matter. In my case I’m importing it inside a script tag with lang set to ts, since I’m using typescript.
A workaround that does not involve empty exports for scenario’s in which you do have a script tag with a src attribute set to the js/ts file, is the following.
Love you man, I don’t know how you found this. They should update the docs
If anyone can test #1806?
<projectUrl>/server
in vscode config.PS. https://github.com/vuejs/vetur/blob/master/.github/CONTRIBUTING.md
please fix this bug, it is very annoying
Please, fix it sooner than “never”. It’s really annoying to add this to SVG component icons.
Wait for #1806 I believe coming soon
My fault, I’ve write vue-shims.d.ts myself with
and I updated it to
and things goes well.
Thanks for response.
Hi anyone, I publish self-maintenance vscode extension. This extension will be maintained until Vetur is reactivated.
https://marketplace.visualstudio.com/items?itemName=yoyo930021.vuter
I added this to my
.vscode/settings.json
and restarted vscode.This fixed the issue for me.
@yoyo930021 tested. LGTM!
@uri I fetched your example project and noticed the error.
Although updating to 0.19.5 eliminated the
Vetur(2306)
error on my project, the components have the<script>
tag. Adding a note to my initial post.I came across the same problem. Then rollback to 0.18 solving it…
workaround: just add a empty class then resolve.
– but it still got error when import script file.
Same. Even with functional components. eg:
I think it’s since the VSCode update