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

[uri]

• [x] I have searched through existing issues
• [x] I have read through docs
• [x] 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

[mika76]

Same. Even with functional components. eg:

<template functional>
    <i class="pe-7s-attention fa-4x text-warning"></i>
</template>

I think it's since the VSCode update

[SaulIO]

I also have this same bug

[jiaoguanwen]

I also have this same bug

[yoyoys]

workaround: just add a empty class then resolve.

--
but it still got error when import script file.

[cub]

And Vetur show the same error if you split code into files like :

<template>
  <div class="logout">
    Logout !
  </div>
</template>

<script src="./logout.js"></script>
<style scoped lang="scss" src="./logout.scss"></style>

Output Vetur
...logout.vue' is not a module. Vetur(2306) [1, 1]

[si7o]

And Vetur show the same error if you split code into files like :

<template>
  <div class="logout">
    Logout !
  </div>
</template>

<script src="./logout.js"></script>
<style scoped lang="scss" src="./logout.scss"></style>

Output Vetur
...logout.vue' is not a module. Vetur(2306) [1, 1]

I think this may be a different problem.
I'm having the same error as you. I checked Vetur github and they pushed a new version today (0.19.1) and I have it installed... yesterday (18 hours ago) I had no problems.

[pavelmardouski]

Rollback to the previous version of Vetur for example 0.19.0, should fix the issue Vetur(2306)

[coolicer]

Rollback to the previous version of Vetur for example 0.19.0, should fix the issue Vetur(2306)

0.19.0 same as 0.19.1

[si7o]

I know it makes no sense at all, but the Vetur(2306) error was solved after renaming the first file that started reporting problems.
I first noticed it on a file called LoginBox.vue then it spread to any .vue file I opened on the editor. I renamed the LoginBox.vue and the problem was gone. Then I changed it back to it's original filename and everything was ok. :/
Still on Vetur 0.19.1, Win 10, VS Code 1.33.1 and no Vetur(2306) error.

PD: I think this is a different error and you should open a new Issue if it keeps occurring.

[mika76]

This is still happening on 0.19.1

workaround: just add a empty class then resolve.

This might work but vue supports functional templates (with no script block) which means vetur should not complain about it. Also if you include a script block is it still a functional component? (I dunno - haven't tried myself). The best workaround I guess would be to rewrite with a render method and not use a template...

[sandii]

I came across the same problem.
Then rollback to 0.18 solving it...

[tvkit]

Updated to 0.19.5 (vscode 1.33.1) and the issue went away.

Edit: the components in my project have <script> tags, and the OP made it clear his doesn't. So my observations aren't relevant despite the similar error conditions.

[uri]

Updated to 0.19.5 (vscode 1.33.1) and the issue went away.

Probably because templateInterpolationService has been disabled. Try adding the following setting in VSCode, do you see the problem again?

  "vetur.experimental.templateInterpolationService": true,

[tvkit]

@uri - after applying the setting you mentioned, the problem did not return.

Here are the contents of my _settings.json_ file. To be sure about the correct settings location, I changed the vetur.dev.loglevel via the Settings editor. Also restarted vscode after the settings were applied. BTW, I didn't notice any direct reference to this issue in the Vetur changelog.

{
    "editor.tabSize": 2,
    "vetur.experimental.templateInterpolationService": true,
    "vetur.dev.logLevel": "DEBUG",
}

Edit: the components in my project have <script> tags, and the OP made it clear his doesn't. So my observations aren't relevant despite the similar error conditions.

[uri]

Strange, I'm still seeing the problem the repro repo I made: https://github.com/uri/vetur-import-example

[octref]

Issue not closed -> This is not fixed yet

[tvkit]

@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.

[mpvosseller]

Until this is fixed adding the following worked for me:

<script>
export default {}
</script>

[zurp]

I'm getting the same error, but regarding the component I'm currently working on.
Using coc-vetur, so maybe it's not related.

[LevYas]

Please, fix it sooner than "never". It's really annoying to add this to SVG component icons.

[n4ks]

The first thing that met me when I tried to work with the typescript is this error

[RobertWHurst]

Any chance we could see a fix here soon?

[KoreSamuel]

same error

[dannysofftie]

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

[RobertWHurst]

Indeed @dannysofftie's solution works, but this shouldn't be an exception in the first place.

[phamgiahung1368]

please fix this bug, it is very annoying

[yoyo930021]

If anyone can test #1806?

1. compile
   bash= git clone https://github.com/yoyo930021/vetur.git git checkout fix-SFC-no-script yarn cd server && yarn && cd .. yarn compile
2. set the vetur config to using it
   vetur.dev.vlsPath set to <projectUrl>/server in vscode config.

PS. https://github.com/vuejs/vetur/blob/master/.github/CONTRIBUTING.md

[NickBolles]

@yoyo930021 tested. LGTM!

[sinisimattia]

Updated to 0.19.5 (vscode 1.33.1) and the issue went away.

Probably because templateInterpolationService has been disabled. Try adding the following setting in VSCode, do you see the problem again?

  "vetur.experimental.templateInterpolationService": true,

Love you man, I don't know how you found this. They should update the docs

[jvdwijngaard]

April 2020
This error/problem is still unresolved. Please fix the error message appearing needlessly.

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.

<script lang="ts">
import script from './script';
export default script;
</script>

[yoyo930021]

Wait for #1806
I believe coming soon

[webcoderkz]

@yoyo930021

2 months have passed, still not merged. Or they won't implement it because of Vue 3 release is under the nose.

[yoyo930021]

@webcoderkz

I don't have any permissions for this project.
I plan to fork this project and maintain until this project reactivate.

[jaideepheer]

I added this to my .vscode/settings.json and restarted vscode.

"vetur.experimental.templateInterpolationService": true

This fixed the issue for me.

[webcoderkz]

@jaideepheer is this documented somewhere? I've tried this, but didn't work for me. Can you paste your functional component?

[yoyo930021]

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

[phamgiahung1368]

@yoyo930021 awesome 👌

[octref]

Both errors should be fixed as we merge @yoyo930021's work in #1806.

[clouds56]

vetur 0.26.1 with "vetur.experimental.templateInterpolationService": true, error still shows.

Argument of type '{}' is not assignable to parameter of type 'new (...args: any[]) => any'.
  Type '{}' provides no match for the signature 'new (...args: any[]): any'.Vetur(2345)

Using vue@next 3.0.0-rc.5

{
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  },
  "dependencies": {
    "vue": "^3.0.0-rc.5"
  },
  "devDependencies": {
    "vite": "^1.0.0-rc.4"
  }
}

and my App.vue

<template>
  <div>hello world</div>
</template>

[octref]

@clouds56 Please share a full repro https://github.com/vuejs/vetur/blob/master/.github/NO_REPRO_CASE.md and open a new issue.

I cannot repro:

[clouds56]

My fault, I've write vue-shims.d.ts myself with

declare module "*.vue" {
  import { ComponentPublicInstance } from "vue";
  const Component: ComponentPublicInstance;
  export default Component;
}

and I updated it to

declare module "*.vue" {
  import { ComponentPublicInstance } from "vue";
  const Component: ComponentPublicInstance | {};
  export default Component;
}

and things goes well.

Thanks for response.