Babel-plugin-module-resolver: Alias with array of paths

[MrBlenny]

I think it would make sense for alias to work in a similar way to root - accept an array of strings/functions that will execute sequentially until one is found.

module.exports = {
  plugins: [
    ["module-resolver", {
      alias: {
        "foo": ["./src/someModule1", "./src/someModule2"]
      }
    }]
  ]
}

This would be used with require('foo/someFile'). If src/someModule1/someFile exists, this will be selected. Else if src/someModule2/someFile exists, this will be selected. Else, an error is thrown as the file cannot be found.

Do we agree this would be useful (and cannot be done currently)?

[tleunen]

Hmm.. Would this really be helpful? What's your usecase for somethine like this? Looks like risky to code a project with a behavior like that.

[fatfisz]

I'm removing the +1 comment - please use the emoji system instead. Commenting like this notifies all people subscribed to the issue and all of the maintainers, and doesn't bring much value. If you want to support the idea, use +1 on the original post.

[ghost]

Describing my use case to support this idea.

I have both frontend and backend in same project folder, separated in sub folders.
Frontend uses webpack with its import alias.
Backend uses babel with this plugin.

Eslint (which also uses this plugin) is in the root with the configuration shared from both frontend and backend.

I would like to alias the character ~ to the relative root [`/backend, /frontend], without using 2 different aliases.
Since their import resolvers are actually separated (babel, webpack), they will not conflict with each other.
Eslint would just look in two folders, instead of one.

Example:

{
      "root": ["."],
      "alias": {
        "~": ["./backend", "./frontend"]
      }
}

Not a big deal to have different aliases, but simply to have a consistent "root" alias character 👍

[tleunen]

Have you tried having ./backend/.babelrc and ./frontend/.babelrc instead? (You'll also need to use the config cwd: 'babelrc').

[ghost]

Thank you for your answer!

In my case, babel is not the problem but eslint
Solution could be ./backend/.eslintrc and ./frontend/.eslintrc but again that would be a duplicated config file, which I'd like to avoid.

For now I'll stick with multiple aliases, which is by far still a good thing, thanks 👍

[tleunen]

But eslint uses the resolver from the babel plugin, so I'm not sure why it fails. If babel is able to do it, eslint should be too. If you have a test repo where I can test this, it would help :)

[fatfisz]

For .eslintrc what you could do is to turn it into .eslintrc.js. Then inside you could import a common file and re-export it.

[tleunen]

eslint also has an extends property, which you can use to refer to the parent config

[krnlde]

This feature would be useful when you have multiple components and you want to import, say @Component/ButtonList which imports @Component/Button, but you want to provide a specialised Button without touching the wrapper component. You could provide a specialised button just by creating a corresponding file.

This could look like this.

{
  "plugins": [
    [
      "module-resolver",
      {
        "alias": {
          "@Components": ["./components", "../master/components"]
        }
      }
    ]
  ]
}

When doing import ButtonList from '@Components/ButtonList'; which itself calls import Button from '@Component/Button'; the module resolver itself could decide if there is a ./component/Button.js or else ../master/components/Button.js. Could also be called a fallback path,

[jleck]

This would be really useful for me when using typescript. Tsconfig supports an array of paths, and my project relies on it.