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.
CodePudding user response:
Untested, but try importing using the scoped package name:
import { initializeApp } from '@firebase/app'
(Note the '@' symbol preceding firebase)
CodePudding user response:
So it really was a WebStorm problem. As @LazyOne identified, we can find the solution for related Cannot resolve symbol ...
issues here and here, regarding both WebStorm and PhpStorm.
TL;DR: All you have to do is: open node_modules
, right-click on the module (folder) @firebase
and select Mark as not excluded
.
It means that your IDE will now index those files, and importing functions from files inside @firebase
is now possible, since they are recognized by the program.
Thank you to everyone involved!