vue import component: "Module is not installed"

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

Works for me:

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/

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

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 :)

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

Just tried it in another VM, same result.

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

You have to include file extension in import - https://intellij-support.jetbrains.com/hc/en-us/community/posts/115000556284/comments/115000480870

>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

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:

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

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

vue init webpack prj_name

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?

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:

• 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

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.