how to resolve import/no-unresolved with setup of eslint in webpack 4

Question

I have researched for a few hours. build a prototype myself and found that the webpack is working on its resolving alias but eslint kept reporting unable to resolve, EVEN after I jammed in setting supposedly resolve this issue.

Anyone know why adding

"settings": {
        "import/resolver": {
            "alias": [
        [ "mycomponents", "./app/components" ]
      ]
        }
    }

to .eslintrc and add two packages related to it won't do it?

to see what I did check this repo diff link: https://github.com/KleoPetroff/react-webpack-boilerplate/compare/master...adamchenwei:master

Note: i could have just hide the eslint error, but that's just a hack route which I would rather not to take, if there is a proper setup.

Thanks

Answer 1

Try adding eslint-import-resolver-alias to your project:

npm i eslint-import-resolver-alias --save-dev

Then update your .eslintrc file as follows:

"settings": {
    "import/resolver": {
        "alias": {
            map: [
                [ "mycomponents", "./app/components" ]
            ]
        }
    }
}