Module resolver support?

[pedro-lb]

Hey,

First of all thanks for this awesome lib! It's really good =)

I wonder if we could add babel.js module-resolver support - in order to support absolute imports.

For example I have this setup in my project:

import FadeIn from "components/Loading/FadeIn";

Thanks to module-resolver I don't have to do ../../../components/Loading/FadeIn, since it simplifies that by allowing me to directly target components folder.

But due to module-resolver, deadfile doesn't recognise that the component is being imported:

Any ideas? I'm willing to contribute to this project. 😃

[M-Izadmehr]

Nice suggestion, if you are interested to help, I would be extremely glad if you are interested to add this feature to the repo. There are three ways to add absolute import that I can think of now, but we can start by supporting babel: 1) package.json:

    "components": "file:./app/src/components",

2) Webpack resolve

  resolve: {
    alias: {
    "components": "file:./app/src/components",
    }
  }

3) Babel

{
  "plugins": [
    ["babel-plugin-module-resolver", {
      "alias": {
         "components": "file:./app/src/components",
      }
    }]
  ]
}

Reminder for future reference I am sure that in 99% of cases there is not going to be a naming conflict between these three, but I think we should initially check their priority (we can go with babel for now).

How to do it Initially, we can just go for babel.

1. We should search for all valid babel config files (based on their priority if there is more than one babel config file .babelrc vs babel.config.js (in the main folder), import it, find the alias section.

This should be done in src/index as a method. This file uses two important methods:

• UsedAssets which finds all files which are imported in the project (this class should get the module aliases as input to be able to use them)
• AllAssets which finds all files existing in the project

2. UsedAssets: In order to handle imports aliases for used assets the main changes should be done in /handlers/fileResolver.js, this file gets import path as (relPath) and currentFile, and decides if this is a node_modules import or not. So before resolving file, and checking if it is node_modules or not, we need to handle aliases.

[matt-dalton]

Do we have to pass in any options to get this to work on v1.2.2? It seems to not be working by default for me with deadfile ./App.tsx --exclude ios android

It could be because of other things I have going on: e.g. Typescript, React Native etc

[ridvanaltun]

Do we have to pass in any options to get this to work on v1.2.2? It seems to not be working by default for me with deadfile ./App.tsx --exclude ios android

It could be because of other things I have going on: e.g. Typescript, React Native etc

Same issue here, i'm using babel-plugin-module-resolver with a react-native project. There is no error, just not recognize resolved paths.

My babel configuration:

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        extensions: [
          '.ios.ts',
          '.android.ts',
          '.ts',
          '.ios.tsx',
          '.android.tsx',
          '.tsx',
          '.jsx',
          '.js',
          '.json',
        ],
        alias: {
          '@components': './src/components',
          '@constants': './src/constants',
          '@screens': './src/screens',
          '@contexts': './src/contexts',
          '@reducers': './src/reducers',
          '@locales': './src/locales',
          '@helpers': './src/helpers',
          '@api': './src/services/ApiService.js',
        },
      },
    ],
  ],
};