Eslint-plugin-import: Add alias or ignore list for no-unresolved rule

[jbe456]

We are using alias for our imports. Which means that for some import, there is no concrete files that can match the name.

It would be great if in the settings>import/resolve section we could add a list of alias or a list of pattern to ignore.

[benmosher]

Can you give me a concrete example?

Also: where is the config for the aliasing? I've been thinking about looking for Browserify/Webpack config and reading it for things like this...

[benmosher]

I think it might make sense to just lump no-unresolved under the import/ignore umbrella.. I'm struggling to remember why I didn't in the first place.

[jbe456]

Here is the documentation of how to configure alias with webpack: https://webpack.github.io/docs/configuration.html#resolve-alias

basically it would just look like:

import whatever from 'my-alias';

Yes applying the import/ignore would be good enough!

[benmosher]

How about this... what if I wrote a custom resolver for Webpack that reads your alias config and uses it as part of the resolution process? I think this would be useful for me as well.

Plus I'm not sure how to add ignores to no-unresolved as the ignore list is currently used just to skip parsing, so node_modules is included by default. But node_modules is a good place to resolve, too.

[xjamundx]

Running into the same issue. Have a handful of webpack aliases. Was confused when the import/ignore option didn't seem to work on the no-unresolved rule.

[benmosher]

I'm close to having a resolver that speaks Webpack config. Hoping to publish this week. 😅

[renke]

Ignore pattern for no-unresolved would be pretty good to have though. I would love to be able to ignore imports like import "file?name=index.html!./index.html";.

[benmosher]

@renke: do you want to ignore it because ./index.html is not present on the filesystem relative to the current file at development time?

Because the Webpack resolver will be (is!) smart enough to ignore loaders and just look for the file.

I suspect your answer is 'yes', though?

[benmosher]

Just published 0.11 with the optional Webpack resolver plugin. To have the linter read your aliases, just add import/resolver: webpack* as a setting in your .eslintrc and make sure to install eslint-import-resolver-webpack wherever the plugin is installed (globally or dev dependency or what have you).

Let me know what still needs to be ignored/repaired beyond that. It is working for my Webpack setup for aliases, externals, and Bower components**!

*: assuming your Webpack config is named webpack.config.js and is a sibling of your package.json. see the README if you need to use a different file

**: had to ignore bower_components so it wouldn't actually parse them for names (makes sense, analogous to node_modules)

Looking forward to feedback! 😅

[benmosher]

Heads up, I'ma close this for now. Let me know if this doesn't solve the issue (anyone) and we can discuss options.

[sgwilym]

In React Native you're able to import image assets like so:

import myImage from '../../images/coolImage.png';

With import/ignore I can get most rules to ignore these files, and would love it if no-unresolved would ignore it too.