Search code examples
typescriptfirebasenpmyarnpkglerna

Difference between import 'namespace/module' and import '@namespace/module' with TypeScript and Yarn?

On an unrelated question we are wondering with Doug, from Google Firebase support, if the different ways of importing packages could be a source of bugs.

The documentation tells to do like this, with Typescript and npm:

import * as firebase from "firebase/app";
import "firebase/auth";
import "firebase/firestore";

I use Yarn and Lerna, with Typescript 3.9. It requires me to add a @ at the beginning of imports using the namespace/module syntaxe, otherwise it complains about not url friendly characters.

I use:

import firebase from "@firebase/app";
import "@firebase/auth";
import "@firebase/firestore";

Are the 2 options actually different in such a way that the second one could trigger bugs that would not happen in the first one, just because of this @ ?

Thanks

Solution

  • The two different import paths mean two different things:

    1. import "@firebase/auth" means that you are importing the @firebase/auth NPM package. This means that the package itself is published in NPM as @firebase/auth
    2. import "firebase/auth" means that you are importing the auth folder from the firebase package

    Looking at the @firebase/auth readme it says

    This package is not intended for direct usage, and should only be used via the officially supported firebase package.

    That seems to support the docs that you should be using the firebase package and importing one of its subfolders.

    Re your other question: which package did you actually npm install?

    Because if you are using the firebase package that is what you should have installed, not firebase/auth - which is not its own NPM module - or @firebase/auth which is not meant for direct use.

    If you did install @firebase/auth that would explain why TypeScript can't find the types in the firebase/auth path as that's not the same package you installed.