import module error with Vue 2.0 and typescript



I'm using Typescript and Vue JS. The compiler works fine but Pycharm show an error in import :

My webpack config: 

const path = require('path')
const webpack = require('webpack')

let config = {
entry: './src/main.ts',
output: {
path: path.resolve(__dirname, 'dist'),
publicPath: '/dist',
filename: 'main.js'
alias: {
vue$: 'vue/dist/vue.esm.js'
extensions:['.js', '.ts', '.vue']
devServer: {
noInfo : true
test: /\.ts$/,
loader: 'ts-loader',
options: {
appendTsSuffixTo: [/\.vue$/]
test: /\.vue$/,
loader: 'vue-loader'

module.exports =config

My typescript config:

"include" : ["./src/**/*"],
"compilerOptions": {
"outDir": "./dist",
"sourceMap": true,
"strict": true,
"module": "es2015",
"moduleResolution": "node",
"target": "es5",
"experimentalDecorators": true

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:

Here's another ticket talking about it, with a comment from someone that has an up-to-date fork:

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 ( 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 ( is fixed in 2017.3)


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


Please sign in to leave a comment.