import module error with Vue 2.0 and typescript

Answered

Hi,

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'
},
resolve:{
alias: {
vue$: 'vue/dist/vue.esm.js'
},
extensions:['.js', '.ts', '.vue']
},
devServer: {
noInfo : true
},
module:{
rules:[{
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
}
}
2 comments

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.

0

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

0

Please sign in to leave a comment.