How is babel able to understand when to import local path and when to import from a library with the same name?

Viewed 49

Today I realised that in our codebase we were using some absolute imports pointing to a folder at the root of our source code. This folder is named redux and contains redux actions. Imports looks like this

import * as actions from 'redux/actions/actions'

Of course we also use redux and do normal redux imports like this, many times even on the same file:

import { ... } from 'redux'

I went crazy looking at the webpack aliases, and there were none pointing at that redux folder. I tried adding it and then build started failing because our local folder does not contain what we were actually importing from redux, so I removed the alias and everything started working again.

After getting crazy trying to understand how this was working, someone pointed at this bit of babel config:

    [
      'module-resolver',
      {
        root: ['./src'],
        alias: {
          icons: './assets/icons',
        },
      },
    ],

That is effectively pointing any import to the root folder of our source code, and therefore makes possible to do any import. However, I still don't understand how babel is able to understand when to import from our local file system and when to use the library on node modules. We are using babel core 7.9.0

0 Answers
Related