Context:

I finally got the initiative do adapt the Firebase library in my app from 9.0.2 compat to the new modular, tree-shakable library. I'm on Windows 10, using WebStorm, and my package.json only has the dependency { "firebase": "^9.0.2" }.

What should work:

When I try to import initializeApp as shown in the documentation:

import { initializeApp } from 'firebase/app';
const firebaseApp = initializeApp({ /* config */ });

I get the error Cannot resolve symbol 'initializeApp'.

Attempts to fix:

I am testing this new Firebase library in a simple Vue.js project, only configured with ESLint and Babel. I tried deleting the node_modules folder, cleaning the chace, reinstalling everything from npm, but nothing seems to make the standard import work.

Current workaround:

I looked into node_modules/firebase and, sure enough, all the standard functions are there, inside javascript files such as firebase-app.js and firebase-auth.js. This means that I can import everything as follows:

import { initializeApp } from 'firebase/firebase-app';
const firebaseApp = initializeApp({ /* config */ });

But I'm sure this is not normal nor expected, as I seem to be the only one that had reported this behavior. What am I missing here?

UPDATE: As @Dharmaraj said, this error does not happen when the same project is configured in VS Code, so this seems to be a WebStorm issue.