Home > Back-end >  Imports not working on Firebase Client v9 (npm)
Imports not working on Firebase Client v9 (npm)

Time:09-26

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!

  • Related