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

Until this is fixed adding the following worked for me:

<script>
export default {}
</script>

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

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]

Any chance we could see a fix here soon?

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,

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>

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

If anyone can test #1806?

1. compile

git clone https://github.com/yoyo930021/vetur.git
git checkout fix-SFC-no-script
yarn
cd server && yarn && cd ..
yarn compile

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

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

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.

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.

"vetur.experimental.templateInterpolationService": true

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:

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

I think it’s since the VSCode update