IntelliJ multiple Javascript named imports not being recognized in Vue file
I am trying to figure out why IntelliJ is stating "Cannot resolve symbol <value>" when doing multiple named imports in a .vue file.
Let the project root be <root>.
I have a JS file with path <root>/src/firebaseConfig.js with the following contents: https://pastebin.com/5X2XGB4w
I have a Vue file with path <root>/src/components/LoginButton.vue that has the following line:
import {auth, provider} from '@/firebaseConfig';
Note that the following line also shows the same error, so it is not an issue with the Vue @ symbol as a shortcut for src:
import {auth, provider} from '../firebaseConfig';
In this line, the auth and provider keywords show the errors "Cannot resolve symbol auth" and "Cannot resolve symbol provider", respectively.
This only occurs when importing JS exports in a .vue file. It does not occur when importing in a .js file.
Note that I have the Javascript and Vue.js plugins installed in IntelliJ.
请先登录再写评论。
can't reproduce
Do you have any other files with the same name (firebaseConfig) in this folder?
Nope. Just the one. Let me try making a minimal project and sending a zip here.
Also, I am unsure of its relevance, but I set up the project using vue-cli and am using Vue 2.
>I set up the project using vue-cli and am using Vue 2.
I was using the same setup when trying to reproduce the issue
Sample project would be appreciated
It seems like I cannot upload the file here, so here is a Google Drive link to the project zip: https://drive.google.com/file/d/1Cq5pMIJrfiQKScM34a3PBPlyPLKXnalo/view?usp=sharing.
You can run npm install inside it to install the required node.js packages.
Thanks!
No luck in reproducing the issue unfortunately:
Could you check if you can reproduce the issue if you start the IDE with default settings (File > Manage IDE Settings > Restore Default Settings...), without custom plugins?
I tried it just now. That did fix the issue. That is, with default settings, the issue does not appear.
Is there any way to narrow down where the issue is in my IDE settings since wiping out all my IDE settings would be less than ideal?
Please try re-importing your actual settings from backup and then disabling all non-bundled plugins - does the issue persist? if yes, please share your settings (File > Manage IDE Settings > Export settings)
I tried disabling all nonbundled plugins (other than Vue.js for obvious reasons), but the issue still persisted.
Here is my settings zip: https://drive.google.com/file/d/1OZBv5qUPR8BEtuiMt-IX6cDjETRf6NSy/view?usp=sharing
Thanks!
in your settings, you have removed
*.jspattern from JavaScript file type:...
<removed_mapping ext="html" approved="true" type="HTML" />
<removed_mapping ext="js" approved="true" type="JavaScript" />
...
As a result, all your
*.jsfiles are treated as plain text, and advanced features provided by the Javascript plugin are disabled for them, so the exported modules are not recognized. Adding pattern to JavaScript in Preferences | Editor | File Types should help:Yes, that resolved the issue. Thank you!
The reason I had removed *.js from JavaScript was that I was trying to resolve an issue where Lodash templating was being shown as invalid in .js and .html files as per https://stackoverflow.com/a/64103613/5547232 (with having the EJS plugin).
Is there any way to have *.js and *.html files work with EJS templating then?
The solution is still the same as described in https://stackoverflow.com/questions/64098937/webstorm-cant-resolve-lodash-template-delimiter/64103613#64103613; but you shouldn't have associated all JavaScript files with EJS by moving the
*.jspattern to EJS file type, you need specifying explicit patterns there only (i.e. only list those files you need recognizing EJS syntax in)I see. Is there no way of having *.js in both EJS and JavaScript so files are assumed to have EJS templating?
No way:(
Create a jsconfig.json in the root directory. Then paste the below content:
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
}
}
WebStorm will recognize the imports.
Source: Stackoverflow-WebStorm