What does the '@' mean in front of an import in React?

Question

I'll see imports in React that look like:

import {object} from '@library/component' 

What is the @ referring to and what kind of import is this? Thanks!

Answer 1

These are scoped packages

Scopes are a way of grouping related packages together, and also affect a few things about the way npm treats the package.

The import is using a specifically named import vs the default import which can be used to namespace exports.

Answer 2

It's just not limited to React only but it's a part of npm and many other framework also use it (Angular etc). In addition to what Lance mentioned here are some advantages of it.

1. We don’t have to worry if the name exists - just name it.
2. We don’t have to worry that someone else will publish into our scope - only scope members have the permission.
3. We don’t have to switch the npm registry in order to install and publish the packages - we assign a specific registry for the scope.