import module error with Vue 2.0 and typescript

That's a TypeScript Compiler (tsc) error, so I don't think PyCharm (read: WebStorm) is responsible for the error. It would likely occur if you ran tsc (or webpack) outside of PyCharm.

It can be tricky to teach the entire stack to be aware of .vue files being treated as TypeScript files, explained somewhat here in the Microsoft "fork" of Vue.js: https://github.com/Microsoft/TypeScript-Vue-Starter

Here's another ticket talking about it, with a comment from someone that has an up-to-date fork: https://github.com/vuejs/vue-cli/issues/263#issuecomment-351552812

In my experience with cutting-edge combinations of frontend stuff, it's been hard to get a combination of latest-greatest of a not-so-normal stack with an IDE added in. I'm committed to TypeScript, which has meant I'm an outlier when it comes to React or Vue.

Thank you, @Paul

Error comes from typescript language service, not from the IDE; Typescript compiler/service doesn't currently handle .vue files (https://github.com/Microsoft/TypeScript/issues/10427). I'd suggest disabling the service in Settings | Languages & Frameworks | TypeScript to get rid of it.

Note that for PyCharm versions < 2017.3 I'd recommend adding .vue extention when importing from .vue files to get imports recognized (https://youtrack.jetbrains.com/issue/WEB-28144 is fixed in 2017.3)

Note: thread move to WebStorm forum, as Webstorm is a host project for typescript/vue support

It's been more than two years and this issue still exists. Vue + TypeScript is no longer cutting edge by any definition.

For VSCode the Vetur extension provides a language server that understands vue files. So far to use the excellent TypeScript support in WebStorm we devleoped our components by separating into .ts and .html files and using class style components. Since Vue 3.0 will not have native class components for a number of reasons, one of them being edge cases with TypeScript type inference, we decided to adopt the more common practice of writing single file components. Everything works fine except that irritation import error.

Would you consider including some sort of fork of Veturs language server? There's already a fork of that for Theia.

https://github.com/Devpodio/theia-vue-extension

>It's been more than two years and this issue still exists. 

Could you please share some information about your project setup?

The original issue was fixed in WS 2019.1 after implementing https://youtrack.jetbrains.com/issue/WEB-33130

I can confirm that problem still persists.

It is a _false_ error mark on a .vue component import. The tooltip error message is like "TS2307: Cannot find module @/App.vue".

The import itself work fine. When I do Ctrl+click on the module name - it opens. And project compiles without errors. I'm compiling it from command line, not from IDE.

The error mark is displayed regardless of using full or short import path.

what do your tsconfig.json file(s) and the project structure look like? please share a sample project the issue can be reproduced with

Thanks for hint, @Elena. Now it works!

My project has multiple separate apps in /apps folder. Like /apps/AppOne, /apps/AppTwo, etc. Each app has its own tsconfig.json and webpack.config.js. To build an app I run this from the project root:  npx webpack --config  apps/AppOne/webpack.config.js

And the solution is to add another tsconfig.json to the project root. It is just a copy of one of the app files, but without app-local mappings in the paths section. After that all .vue imports stop showing the error marks.

I also have common .ts modules in /lib folder, and it should be mapped in the paths section differently for app and root tsconfigs, to reflect actual path to it.

Hi,

I still have this problem.

With a component like:

<template>
    <h1>This is a test</h1>
</template>

<script lang="ts">
    export default {
        name: "Test"
    }
</script>

<style scoped>

</style>

where both this component and the one referencing it are under:

/src/ui/components

with the following tsconfig:

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ],
    "typeRoots": [
      "./node_modules/@types",
      "./types"
    ]
  },
  "include": [
    "types/*.d.ts",
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

I get the import error:

I also have a shims-vue.d.ts inside /types folder:

declare module '*.vue' {
    import Vue from 'vue'
    export default Vue
}

Thanks in advance for any help.

Try adding `.vue` extension to the import:

import Test from './Test.vue';

Anoter (related) problem: false error marks on the _short_ imports in apps for non-Vue files (for the setup decribed above: https://intellij-support.jetbrains.com/hc/en-us/community/posts/115000800070/comments/360001602740 ).

Suppose that app-local tsconfig contains following in paths: {"@/*": ["src/*"], "@lib/*": ["../../lib/src/*"]}.
Then, the short import of a .vue module inside an app-local index.ts (or other) file: import App from "@/App.vue"; works fine, but import of a .ts (or .js) module: import MyClass from "@/MyClass"; shows the false error mark.
If I define alias for "@" in the _root_ tsconfig like {"@/*": ["apps/AppOne/src/*"]}, that error mark disappears, but it breaks the idea of having independent local app configs.

It looks like that imports of .vue files have some magic applied. And, probably, import of other types of modules should have that magic too.

The addition of the '.vue' suffix in import statement works, thanks!

And now it has been returned to the beginning - after upgrade to TS 3.8 (or 3.7). Invalidating caches and restart have no effect.

Now .vue imports are showing false error marks again, and .ts or .js imports (short or long) works fine.

By the way - how can I upload a file in comment, how to insert code blocks in comment, and so on - where is the help section?

I can only say that something must be wrong with your tsconfig.*.json files; I can hardly advise on fixing the issue unless you provide a sample project it can be reproduced with

> how can I upload a file in comment

You can upload it to some file server and provide a link here

>how to insert code blocks in comment

paste it from some editor that supports rich text copying:(

Now it works.

And, yes, the problem was in the app-local tsconfig.json file(s).
It should contain an explicit reference (in include section) to the root folder containing the shims-vue.d.ts file.
It looks simple and obvious now, but I don't realized it from the very beginning because the actual compilation had worked fine without such a reference.