Vuex "Module is not installed" warning using Nuxt.js

I have read most of the similar posts about these issues, and I cannot seem to find an answer.

Some information about the issue:

  • node_modules is my library root.
  • I've invalidated cache, but nothing changed.
  • This is happening to all the members of our team who use Webstorm in different environments (Windows/Mac/Linux).
  • The warning suggests I install Vuex as a dev dependency, for some reason.
  • Vuex is not installed as a package, because it comes with Nuxt. It is listed in the node_modules folder and it's also inside the @nuxt folder inside the node_modules folder. It's there, where it should be, but it doesn't seem to be indexing it.
  • Vuex works in the project, it's just that Webstorm does not autocomplete, suggest, or autoimport anything related to Vuex, as if it were not there.

Any additional information I can provide, just let me know.

 
 
 
 
 
 
10 comments
Comment actions Permalink

vuex module is not listed in package.json dependencies and thus not indexed (excluded from project). Only direct dependencies listed in package.json are indexed by default. Please right-click node_modules/vuex folder in the Project toolwindow and choose Mark directory as | Not excluded from the menu - this should help

0
Comment actions Permalink

Oh, I see. I thought dependencies of dependencies were indexed as well, but it makes sense that they are not, otherwise indexing would take forever.

The Vuex folder is not explicitly marked as "excluded" (hovering over it says "Folder" and not "Excluded", and the icon is not the color of the excluded folders). The "Mark directory as" option is grayed out. Any ideas of why this could be? I tried it with the @nuxt folder, and it allowed me to include it, but it didn't fix the original issue.

The color of the icons don't seem to be consistent with whether the folders are excluded or not. And the option "Mark directory as" is available on some and on some not. I'm confused.

 

Thanks for the quick reply!

 
 
 
0
Comment actions Permalink

Also, some more information: in the Directories setting, the colors are consistent, but I cannot include the folder. It doesn't do anything when I try.

 

 
 
 
0
Comment actions Permalink

Hmm.. what vuex version do you use? Could you share your package.json?

0
Comment actions Permalink

Unfortunately, I cannot share it whole, because of confidentiality agreements, but I can share the dependencies.

 

 "dependencies": {
"@nuxtjs/dotenv": "^1.4.1",
"@nuxtjs/style-resources": "^1.0.0",
"agentkeepalive": "^4.1.0",
"algoliasearch": "^3.35.1",
"amiga-services-core": "^3.8.2",
"amiga-services-kafka": "^3.8.2",
"amiga-services-log": "^3.8.2",
"amiga-services-metrics": "^3.8.2",
"apollo-boost": "^0.4.7",
"apollo-cache-inmemory": "^1.6.5",
"apollo-client": "^2.6.8",
"apollo-link-prismic": "^1.0.7",
"axios": "^0.19.2",
"battery-friendly-timer": "^1.0.1",
"blueimp-md5": "^2.13.0",
"cookies": "^0.8.0",
"dayjs": "^1.8.34",
"dotenv": "^6.2.0",
"express-interceptor": "^1.2.0",
"graphql": "^14.6.0",
"graphql-tag": "^2.10.3",
"iframe-resizer": "^4.2.11",
"node-fetch": "^2.6.0",
"node-html-parser": "^1.2.19",
"nuxt": "^2.12.2",
"nuxt-env": "^0.1.0",
"nuxt-polyfill": "^1.0.3",
"nuxt-purgecss": "^0.2.1",
"on-headers": "^1.0.2",
"pm2": "^3.5.2",
"prismic-javascript": "^1.5.1",
"qs": "^6.9.3",
"redis": "^2.8.0",
"search-insights": "^1.4.0",
"srcdoc-polyfill": "^1.0.0",
"v-runtime-template": "^1.10.0",
"vue-i18n": "^8.16.0",
"vue-on-click-outside": "^1.0.3",
"vue-svgicon": "^3.2.6",
"winston": "^3.2.1",
"winston-transport-browserconsole": "^1.0.5"
},
"devDependencies": {
"@babel/plugin-proposal-class-properties": "^7.8.3",
"@babel/plugin-proposal-decorators": "^7.8.3",
"@babel/plugin-proposal-object-rest-spread": "^7.9.5",
"@nuxt/devalue": "^1.2.4",
"@types/jest": "^24.9.0",
"@vue/test-utils": "^1.0.0-beta.27",
"babel-eslint": "^8.2.1",
"babel-jest": "^24.1.0",
"babel-plugin-dynamic-import-node": "^2.2.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"browser-env": "^3.2.5",
"bulma": "^0.7.1",
"cross-env": "^5.2.0",
"cucumber": "^4.2.1",
"eslint": "^5.4.0",
"eslint-config-semistandard": "^13.0.0",
"eslint-config-standard": "^12.0.0",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^2.1.2",
"eslint-plugin-html": "^4.0.3",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jest": "^21.27.1",
"eslint-plugin-node": "^7.0.1",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^4.0.0",
"eslint-plugin-vue": "^5.2.3",
"etag": "^1.8.1",
"flush-promises": "^1.0.2",
"ink-docstrap": "^1.3.2",
"jest": "^24.1.0",
"jest-date-mock": "^1.0.8",
"jest-extended": "^0.11.0",
"jest-serializer-vue": "^2.0.2",
"js-cookie": "^2.2.0",
"jsdoc": "^3.6.2",
"module-alias": "^2.1.0",
"node-sass": "^4.9.0",
"npm-run-all": "^4.1.3",
"require-extension-hooks": "^0.3.2",
"require-extension-hooks-babel": "^0.1.1",
"require-extension-hooks-vue": "^1.1.0",
"resize-observer-polyfill": "^1.5.1",
"sass-loader": "^7.0.3",
"selenium-webdriver": "^4.0.0-alpha.1",
"semistandard": "^12.0.1",
"uuid": "^3.3.2",
"vue-autosize": "^1.0.2",
"vue-awesome-swiper": "^3.1.3",
"vue-infinite-scroll": "^2.0.2",
"vue-jest": "^4.0.0-0",
"vue-loader": "^15.4.2",
"vue-scroll-stop": "^0.1.5",
"vue-touch": "^2.0.0-beta.4",
"vue-viewports": "^3.1.2",
"vuex-persistedstate": "^2.5.4"
}
}
0
Comment actions Permalink

With your package.json, the only warning I can see is Module is not listed in package.json dependencies, which is true:)

 

Module is correctly resolved, code completion works as expected

You can suppress the warning with a comment:

// noinspection NpmUsedModulesInstalled
import { mapState } from "vuex";
0
Comment actions Permalink

Sorry about the late response. On our end, the module is correctly resolved JS-wise, but code completion does not work for us at all. Auto-import doesn't work either. The warning is not really a problem for us, as it's a Webstorm warning and not a linter warning. We are using the latest version of Webstorm, and we haven't really fiddled with the settings in any way that could cause a problem.

It's not a huge issue, we can still type and manually import, but given that Webstorm is so good at doing these things for us with other things, and that it does support Vuex, especially after the last major update, it's a shame that we cannot get it to recognize our Vuex. I suppose it's not a problem of it not being listed in the dependencies as I initially thought, but a problem of indexing, somehow.

If you have any other advice you can give us, we would appreciate it. Also, if I can provide further information to help you replicate the issue, I will be glad to do so. If not, still, thank you for your help, you've been very helpful! Webstorm has some of the best support of any software I use.

0
Comment actions Permalink

Could you clarify what doesn't work for you namely? For example, auto-import of Vuex modules works as expected for me in Nuxt projects:

 

Sample project/steps to repeat would be helpful

0
Comment actions Permalink

I'm having exactly the same issue running:

I have installed nuxt which has a peer dependency of vuex.

Code inspection says Vuex module is not installed

I have included the directory as suggested and even tried to add it as a content root. But nothing helps.

Please could someone take a look at this.

 

 

0
Comment actions Permalink

I just updated my editor and now the problem has gone :)

1

Please sign in to leave a comment.