Resolving aliases

[artola]

I have problems to map a folder, babel-plugin-module-resolver works fine, while with ESLint I can not find the way to tweak eslint-import-resolver-babel-module and get rid of error messages.

error Unable to resolve path to module 'XXX/Button' import/no-unresolved
error Missing file extension for "XXX/Button" import/extensions

node --version
v7.2.0

"babel-eslint": "7.1.1"
"eslint": "3.12.0"

"babel-plugin-module-resolver": "^2.4.0"
.babelrc

{
  "plugins": [
    ["module-resolver", {
      "root": [
        "./src"
      ],
      "alias": {
        "XXX": "scripts/ui/components/"
      }
    }]
  ],
  "presets": ["es2015", "react"]
}

"eslint-import-resolver-babel-module": "^2.2.1"
.eslintrc

{
  "env": {
    "browser": true
  },
  "parser": 'babel-eslint',
  "plugins": ["import"],
  "settings": {
    'import/resolver': {
      "babel-module": {
        "extensions": [
          ".jsx", ".js"
        ]
      }
    }
  },
  "rules": {
    'import/no-unresolved': ["error", {"commonjs": true, "caseSensitive": true}],
    'import/extensions': ["error", 'always', {
      "js": 'never',
      "jsx": 'never'
    }]
  }
}

[artola]

I also tried a different approach ... using a glob for "root", but I can not get the same on ESLint ... then I added some "paths" to obtain a similar result. BUT, I would prefer to have also a glob there to avoid overhead maintaining this config. Is it possible? or some idea?

.babelrc

{
  "plugins": [
    ["module-resolver", {
      "root": ["./src/**/"]
    }]
  ],
  "presets": ["es2015", "react"]
}

.eslintrc

{
  "root": true,
  "extends": "airbnb",
  "settings": {
    'import/resolver': {
      "babel-module": {
        "extensions": [".js", ".jsx"],
        "paths": [
          "./src",
          "./src/scripts",
          "./src/scripts/ui"
        ]
      }
    }
  }
}
```

[tleunen]

Looks like I missed your first message, my bad :(

Setuping the paths shouldn't be required in the eslint plugin. It should reuse the ones from the babel plugin.

By any chance, would you have a repo where you have the issue?

Also, in your first message, is the issue with the root configuration or the alias? If you don't specify the extensions also in the eslint config, does it solve the issue? Because your config looks ok

[artola]

Tks ... babel-plugin works perfect using a glob for root or with path. While eslint-plugin only works if I add extensions and path. I did several tries:
"babel-module": {} => NO
"babel-module": {
"extensions": [".js", ".jsx"]
} => NO
"babel-module": {
"extensions": [".js", ".jsx"],
"root": ["./src/**/"]
} => NO
"babel-module": {
"extensions": [".js", ".jsx"],
"paths": [
"./src",
"./src/scripts",
"./src/scripts/ui"
]
} => YES

For me babel-plugin with "root": ["./src/**/"] works really great, resolving any path (e.g. components/button maps to src/scripts/ui/components/button).
With paths I can get the same result but monkey typing.

I am trying to get rid of relative paths in a project with: Babel + Jest + ESLint + Webpack , and your plugins are the best option because even if it is possible to do something on webpack, then you need to duplicate code on Jest for using CLI and still you need something on Babel to build with the CLI.

I will prepare a repo. Tks a lot for your feedback and your great job!

[tleunen]

For me babel-plugin with "root": ["./src/**/"] works really great, resolving any path (e.g. components/button maps to src/scripts/ui/components/button).

This could actually be an issue if you have another components directory somewhere else, right?

The only thing I see is the glob then, it must be an issue with that. I'll make some tests

[artola]

Please take a look to this repo: https://github.com/artola/plugin
And README shows 3 scenarioswith different configs.
I found that in all of them the resolution is OK, seams to be ESLint wrong doing.
Any idea?

[tleunen]

So I've been investigating on my side and your repo also confirmed what I found. Thanks @artola.

So even though the babel plugin supports a glob configuration, the eslint import plugin doesn't.
The glob configuration is done during the babel parsing, but the eslint plugin doesn't reuse that so I missed it.

I'll make sure to add glob support here.

In the meantime, you can use this babel configuration:

{
  "plugins": [
    ["module-resolver", {
      "root": [
        "./src/**/",
        "./src/scripts/ui"
      ]
    }]
  ],
  "presets": ["es2015"]
}

And the eslint config can stay empty:

"import/resolver": {
  "babel-module": {
  }
}

[artola]

Thanks a lot @tleunen I do believe that these plugins are the best way in the moment to deal with relative path, because Babel glue all the parts, and having the config in only one place make sense.
Looking forward for your support.

[artola]

@tleunen I did the changes that you advised, it works OK for ".js" files ... as soon as I rename some as ".jsx" it is not resolving properly.
Solved adding extensions to babel-module. Note: extensions at module-resolver don't work (seems no fallback to default extensions).

  "settings": {
    "import/resolver": {
      "babel-module": {
        "extensions": [".js", ".jsx"]
      }
    }
  }

[tleunen]

And I believe you're also right, the eslint plugin doesn't reuse the extensions from the babel plugin. This should be added :)

Will make all these fixes when I get some time this week (Probably tomorrow). Thanks again.

[k7sleeper]

What's about .jsx files? Is it fixed?

[tleunen]

Released a 3.0.0 with a fix for the extensions.