react native - absolute import with alias name in package.json

Question

I saw some projects using import '@someDir/something', which solves the relative import evil.

Then I found this blog post talking about this method. It basically tells you to create package.json in directories and specify their alias names.

I implemented it in my react-native project, which is based on expo, and it works well.

Something like this:

{"name": "@someDir"}

inside src/someDir/package.json.

And I can import '@someDir/something' everywhere.

Why is this working? Where is the magic happening behind? Webpack or babel or react-native itself?

I saw an issue discussing about this feature but I don't know where is it implemented.

My .babelrc:

{
  "presets": ["babel-preset-expo"],
    "env": {
        "development": {
              "plugins": ["transform-react-jsx-source"]
      }
    }
}

It digged into the babel dependecies but cannot find anything related.

Answer 1

It seems to be part of metro, the javascript bundler for react native.

https://www.belighted.com/blog/react-and-react-native-directories-management

https://facebook.github.io/metro