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.

 

4
44 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/

3

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.

0

Try adding extension to your import:

import Dashboard from '@/components/Dashboard.vue'

 

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

0

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.

0

it's 2.8.2; I used

vue init webpack prj_name

to create a project

0

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?

0

I referenced build\webpack.dev.conf.js:

2

Just tried it in another VM, same result.

2

Just tried another thing: removed my WebStorm settings by renaming ~/.WebStorm2017.2 folder and restarted WebStorm.

Same result:

0

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)

0

How can I send the files to you?

0

Please put them on some file server and provide a link here

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?

0

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?

0

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.

0

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)

0

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

0

so you can't recreate the issue anymore, right?

0

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.

0

Ok, I think we're getting closer to it - this is what I did on the other machine now:

  • Try it with the old version - not working.
  • Export .idea folder in project, .idea.log and Settings via UI

Next:

  • Run fresh installation: works
  • Export .idea-Folder in project, .idea.log and Settings via UI
  • Run old installation: also works
  • Delete .idea folder in project
  • Start old installation: doesn't work again

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

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

3

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.

0

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.

0

works for me using your preference and .idea folder:

 

and your log shows that webpack config is successfully evaluated...

0

i have same problem with phpstorm 2017.2.4 and Vue.js (172.3968.20)

step to reproduce:

  1. npm install -g vue-cli
  2. vue init webpack my-project
  3. cd my-project
  4. npm install
  5. npm run dev
  6. Install plugin vue.js
  7. Restart ide
  8. Open my-project/src/router/index.js

 

0

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

1

Post is closed for comments.