Eslint-plugin-import: Webpack alias doesn't work while import

[iiison]

I created alias in webpack:

alias: {
    '@utils'      : PATHS.utils,
    '@config'   : PATHS.config,
    '@actions' : PATHS.actions
}

Now I'm importing files from @config directory:

import routes from '@config/routes'

eslint throws error at compile time:

error  '@config/routes' should be listed in the project's dependencies. Run 'npm i -S @config/routes' to add it  import/no-extraneous-dependencies
error  Unable to resolve path to module '@config/routes' import/no-unresolved

[jfmengels]

IMO, and those of the people that have since then replied to you on the ESLint channel (https://gitter.im/eslint/eslint?at=57bdbf7a7c2d3860599d5110, just happened to see), you should probably not start your aliases using the symbol that npm (and thus this plugin) uses to detect scoped packages.

That said, I'm not sure what the best practices are with regards to Webpack aliases and this plugin's support of it. I myself don't like the aliasing, so I have never really fought with this. I think you'll be fine if you use no symbols, or some other like $.

[iiison]

@jfmengels I removed all @ symbols from the aliases:

alias: {
    'utils'      : PATHS.utils,
    'config'   : PATHS.config,
    'actions' : PATHS.actions
}

it still throws the same error :(

[iiison]

Surprisingly, import/no-extraneous-dependencies works fine after adding any symbol(I tried $ and %). But import/no-unresolved error persists.

[benmosher]

Can you post your ESLint settings and your full Webpack config?

[withinboredom]

Also running into this

[jfmengels]

@withinboredom Could you also post your ESLint settings and your full Webpack config?

[withinboredom]

Oh snap, forgot I'd written here, it was an out of date plugin that was causing the issue... I'd recommend the OP check the versions of eslint plugins (and eslint itself) to make sure they are compatible versions.

[iiison]

@benmosher I created a gist, here is the LINK

[benmosher]

@iiison, it doesn't look like you've configured the Webpack resolver? I don't see any ESLint settings, you need at least:

settings: { 'import/resolver': 'webpack' }

and you need to have installed eslint-import-resolver-webpack as a dev dependency (reachable from your eslint-plugin-import installation)

[benmosher]

also: .elsintrc.js? is that just a gist issue, or is that the actual filename? (should be .eslintrc.js)

[iiison]

@benmosher elsintrc is typo :P Didn't see at settings property at eslint before. it works fine now.