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.

 

44 comments
Comment actions Permalink

You can try specifying node_modules/@vue/cli-service/webpack.config.js as a config.

Works for me:

7
Comment actions Permalink

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
Comment actions Permalink

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
Comment actions Permalink

Thanks Elena! Now is working as intended! It would be great if you guys could document this so other users know how to proceed. Have a nice day :)

3
Comment actions Permalink

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

2
Comment actions Permalink

Just tried it in another VM, same result.

2
Comment actions Permalink

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
Comment actions Permalink

>But the problem may be that the Vue.js project is not in the root of Intellij IDEA project

That's the issue - https://youtrack.jetbrains.com/issue/WEB-32564. IDEA uses project root dir as cwd when resolving aliases, so src folder is resolved relative to the project root, not to your Vue.js app folder.

So your issue is indeed the same as https://intellij-support.jetbrains.com/hc/en-us/community/posts/360000578284--alias-in-vue-cli-3-projects

1
Comment actions Permalink

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
Comment actions Permalink

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
Comment actions Permalink

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
Comment actions Permalink

it's 2.8.2; I used

vue init webpack prj_name

to create a project

0
Comment actions Permalink

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
Comment actions Permalink

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

Same result:

0
Comment actions Permalink

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
Comment actions Permalink

How can I send the files to you?

0
Comment actions Permalink

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

0
Comment actions Permalink

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
Comment actions Permalink

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
Comment actions Permalink

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
Comment actions Permalink

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
Comment actions Permalink

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
Comment actions Permalink

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

0
Comment actions Permalink

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
Comment actions Permalink

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
Comment actions Permalink

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
Comment actions Permalink

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

Post is closed for comments.