Situation:
After finally taking the initiative to update the Firebase library in my app from 9.0.2 compat to the new modular, tree-shakable library, I encountered some issues. Using Windows 10 and WebStorm, my package.json only contains the dependency { "firebase": "^9.0.2" }.
Expected Outcome:
Following the documentation, when trying to import initializeApp:
import { initializeApp } from 'firebase/app';
const firebaseApp = initializeApp({ /* config */ });
I received an error stating Cannot resolve symbol 'initializeApp'.
Attempts at Resolution:
In a basic Vue.js project with ESLint and Babel, I attempted various fixes like deleting node_modules, clearing cache, and reinstalling npm packages, but the standard import still didn't work.
Current Solution:
Upon inspecting node_modules/firebase, I found all the standard functions within files like firebase-app.js and firebase-auth.js. This led me to import everything using:
import { initializeApp } from 'firebase/firebase-app';
const firebaseApp = initializeApp({ /* config */ });
However, this workaround doesn't seem normal or expected as no one else has reported it. What could be the issue here?
UPDATE: According to @Dharmaraj, this error is not present when using VS Code, indicating that it may be a WebStorm-specific problem.