vue import component: "Module is not installed"
I created a vue.js 2 project via vue-cli and created two simple components like this
<template>
<div class="jumbotron">
Dashboard
</div>
</template>
<script>
export default {
name: 'dashboard',
};
</script>
When importing the components like this (using webpack vue-loader) I get the warning that the Modules are not installed:
"Go To Declaration" also doesn't work.
Post is closed for comments.
what does your webpack config look like? did you set up webpack in Settings | Languages & Frameworks | JavaScript | Webpack? see https://blog.jetbrains.com/webstorm/2017/06/webstorm-2017-2-eap-172-2827/
I've referenced the webpack.dev.conf.js:
var utils = require('./utils')
var webpack = require('webpack')
var config = require('../config')
var merge = require('webpack-merge')
var baseWebpackConfig = require('./webpack.base.conf')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
// add hot-reload related code to entry chunks
Object.keys(baseWebpackConfig.entry).forEach(function (name) {
baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
})
module.exports = merge(baseWebpackConfig, {
module: {
rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
},
// cheap-module-eval-source-map is faster for development
devtool: '#cheap-module-eval-source-map',
plugins: [
new webpack.ProvidePlugin({
Popper: ['popper.js', 'default'],
}),
new webpack.DefinePlugin({
'process.env': config.dev.env
}),
// https://github.com/glenjamin/webpack-hot-middleware#installation--usage
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
// https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
}),
new FriendlyErrorsPlugin()
]
})
webpack.base.conf looks like this:
var path = require('path');
var utils = require('./utils');
var config = require('../config');
var vueLoaderConfig = require('./vue-loader.conf');
function resolve(dir) {
return path.join(__dirname, '..', dir);
}
module.exports = {
entry: {
app: './src/main.js',
},
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath,
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
vue$: 'vue/dist/vue.esm.js',
'@': resolve('src'),
},
},
module: {
rules: [
{
test: /\.(js|vue)$/,
loader: 'eslint-loader',
enforce: 'pre',
include: [resolve('src'), resolve('test')],
options: {
formatter: require('eslint-friendly-formatter'),
},
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig,
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test')],
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]'),
},
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]'),
},
},
],
},
};
All files / settings have been created by vue-cli.
Try adding extension to your import:
this should solve the issue:
.vue files imports without extension aren't currently resolved, https://youtrack.jetbrains.com/issue/WEB-28144 is fixed in 2017.3
Thanks for investigating. If I add the .vue extension, I still get the error:
Which vue-cli version did you use to create the sample?
I'll try to create a repro which I can share on GitHub.
it's 2.8.2; I used
to create a project
Thanks, I updated to vue-cli 2.8.2 and created a new project.
After adding my Dashboard component (including .vue extension), I still get the error.
The webpack config I referenced is build/webpack.dev.conf.js - did you use the same?
I referenced build\webpack.dev.conf.js:
Just tried it in another VM, same result.
Just tried another thing: removed my WebStorm settings by renaming ~/.WebStorm2017.2 folder and restarted WebStorm.
Same result:
Please recreate the issue and provide your hello-vue-webpack project and idea.log (https://intellij-support.jetbrains.com/hc/en-us/articles/207241085-Locating-IDE-log-files)
How can I send the files to you?
Please put them on some file server and provide a link here
You can download them from here: https://www.dropbox.com/s/996i868te51zgon/vue-module-is-not-installed.tar.gz?dl=0
works fine for me using your project:
no errors in log, messages indicate that webpack config was evaluated in 2 ms...
Please Ctrl+click on `@` in import path - what can you see?
similar issue is tracked as https://youtrack.jetbrains.com/issue/WEB-28056... we have been unable to recreate it so far:(
Can you repeat the issue in a fresh WebStorm installation, without any custom plugins installed?
After a fresh installation:
Go to declaration now also works.
I also tried to disable all custom plugins in the previous installation which did not fix it.
Do you have your previous installation still available?
If yes, can you try the following:
- disable all custom plugins there
- recreate the issue, provide the new idea.log and settings (File | Export settings)
Now I did the following:
I restored the backup of my old settings from ~/.WebStorm2017.2.bak to ~/WebStorm2017.2
Then I started WebStorm using the desktop launcher entry.
The launcher has been updated by the previous fresh installation to point to the new installation (which I noticed after starting WebStorm again - my bad).
The fresh WebStorm installation now has loaded with my old settings (including custom plugins) from above and it did resolve @ correctly:
Now I closed WebStorm again and started the old version using the /bin/webstorm.sh script and it still works.
You can find the settings here:
https://www.dropbox.com/s/c0pr0abunrd4b5a/settings.zip?dl=0
The current logs can be downloaded from here:
https://www.dropbox.com/s/clmokhw4acy3bim/logs-20170907-163508.zip?dl=0
so you can't recreate the issue anymore, right?
No, I can't recreate it again in this VM.
I also tried another step:
I renamed the current settings again from ~/.WebStorm2017.2 to ~/.WebStorm2017.2.bak.
Then I started the old WebStorm version again. Now it asked me to import settings from a previous version and I pointed it to ~/.WebStorm2017.1 (the same version the previous settings have been created from a while ago when updating from 2017.1 to 2017.2) and it still works now.
I have another machine where the issue still exists but I don't have access to it at the moment.
I'll try to reproduce it later on at that particular machine again.
Ok, I think we're getting closer to it - this is what I did on the other machine now:
Next:
So it seems to depend on the .idea content.
Here are all exported settings/contents: https://www.dropbox.com/s/26nvvhb31bsibhv/exports.zip?dl=0
In .idea-not-working a correct path to webpack config is not set:
once I set it and re-open the project, the error goes away:
Note: I also imported your settings-not-working.jar to make sure that all preferences are the same
Ok, looks like this really was the issue.
Now I tried on my MacBook as well. Same error.
Then I changed the webpack config path. Still the error.
Then I restarted WebStorm and the error was gone and even "Go to declaration" did work.
I think we can consider it done. Thanks for your help and patience.
Looks like the issue is back again:
Settings, Logs etc.: https://www.dropbox.com/s/wsb10oyh0athwrv/module-not-installed.zip?dl=0
Restarting WebStorm / Invalidating Caches did not fix it.
works for me using your preference and .idea folder:
and your log shows that webpack config is successfully evaluated...
i have same problem with phpstorm 2017.2.4 and Vue.js (172.3968.20)
step to reproduce:
make sure to specify a path to your webpack config in Settings | Languages & Frameworks | JavaScript | Webpack. See https://intellij-support.jetbrains.com/hc/en-us/community/posts/115000556284/comments/115000480144
Note also that you have to include file extension in import - https://intellij-support.jetbrains.com/hc/en-us/community/posts/115000556284/comments/115000480870
that not help http://imgur.com/fF1Lngdl.png
You have to include file extension in import - https://intellij-support.jetbrains.com/hc/en-us/community/posts/115000556284/comments/115000480870