Can't import firebase from 'firebase/app'

I have a blog app where I want to connect the frontend with firebase real time database. So I installed firebase using npm install firebase --save as mentioned in the firebase docs. But am not able to import firebase using import firebase from 'firebase/app'. It says the module firebase is unknown. I even tried without ‘/app’ but still not working?

Can someone help me solve this issue? I tried the other approaches like emberfire and ember-firebase-service. But still not working. Although the error is not the same as the above. Would be helpful if someone can mention why I am not able to import firebase in the import statement?

In Ember you can’t yet just use a 3rd party module without ingesting it into the build somehow. There are several ways to do this. Most likely what you want is to use ember-auto-import if you aren’t already. You could also import firebase using your ember-cli-build. If you look at the current emberfire code it appears they are using ember-auto-import. Do you have ember-auto-import installed already?

1 Like

I installed ember-auto-import and now its working fine. Thank you @dknutsen. Is that the reason why we have to ember install packages instead of yarn/npm install?

That’s actually a separate thing. I’ll try to give a high level of both.

RE: ember install, we encourage ember install instead of yarn/npm install because ember addons have these extra bits called blueprints which can do special stuff when installing e.g. add a new file to your project or run some other node code to configure the new addon. There’s nothing stopping you from using yarn or npm install commands, but sometimes you’ll then need to manually run the addon blueprint.

Now for ember-auto-import… IIRC ember-cli was created before javascript modules were really a standard thing, and the whole javascript ecosystem was kind of a wild-west mess. So ember-cli came up with it’s own ways to manage addons and modules and ember addons have some special code for adding files to the build, etc. By default ember-cli doesn’t do this with 3rd party non-ember packages. You can elect to manually import them in your ember-cli-build but the modern way is using ember-auto-import. This will all change soon though, as ember has a next gen build system well underway called embroider. Embroider will use tools like webpack under the hood and modernizes Ember’s addon format so everything is more consistent and cohesive. Once embroider lands using ember-auto-import won’t be necessary and 3rd party libraries should work out of the box.

1 Like