eslint-plugin-import: Error when importing images using aliases

Hello all,

Recently I have updated my project and my eslint has started complaining when I import an image using an alias (extraneous dependency error). In order to get rid of this error I added: "import/ignore": ["/*.png/", "/*.jpg/"]

Which made my webpack build is ok as expected. However, VSCode highlights my “import myimage from @Images/my_image.png” as red due to “import/no-extraneous-dependencies”.

On the other hand if I have: "import/ignore":["*.png", "*.jpg"]

Then the highlight red error from VSCode goes away but my webpack build throws:

ERROR in Invalid regular expression: *.png: Nothing to repeat
Occurred while linting blabla\index.js:2

It looks like VSCode ESLint plugin and webpack eslint stuff do not use the same patterns for import/ignore.

I have created the following repo where I get the same result: https://github.com/javierguzman/eslint-error

You may need to do npm install --force for the node_modules.

In order to reproduce the error:

Open Header.tsx and you will see no error highlights
Run “npm run build:production”
You get the invalid regular expression
Change the expression of import/ignore
Run “npm run build:production” and it is ok
However if you go to Header.tsx you will see the import marked as red due to extraneous dependencies

I hope my configuration is not that bad 😄 I have two eslint configuration, one for development and one for production. build:production as well as vscode uses the production es lint configuration. This can be seen in the vscode configuration folder under the repository I have created.

Please, let me know if you need something else from me.

Thank you in advance for the help and regards

p.s. the lint configuration to be looked at is .eslintrc.json, ignore the development one

About this issue

Original URL
State: open
Created 3 years ago
Comments: 33 (16 by maintainers)

Links to this issue

Problems with ESLint in my React project

Most upvoted comments

@ilumin a proper solution is using overrides so that the client and server code have slightly different eslint configs - so the server code doesn’t use the webpack resolver at all.

ljharb on Jan 26, 2023

I don’t yet have any other ideas; I’ll keep playing with the repo.

ljharb on Sep 24, 2021

I have run again npx eslint ./src/features/Header/Header.tsx -c ./config/.eslintrc.json and still complains about the extraneous dependency, so it is not the plugin I believe.

javierguzman on Sep 22, 2021

Oh I see, I thought you were saying [“/.png/", /.jpg/”] is not a valid regex, but you meant it is a valid regex but not the one I was looking for 😄

I have the webpack resolver as well:

"settings": {
        "import/resolver": {
            "node" : {},// due to https://github.com/benmosher/eslint-plugin-import/issues/1396
            "webpack": {
                "config" : "config/webpack-prod.js",
                "extensions": [".js", ".jsx", ".ts", ".tsx"]
            }
        }

javierguzman on Sep 22, 2021

oh sorry, i’ll try to use that repo.

ljharb on Sep 20, 2021

How can I run eslint cli directly? Now I think about it, the import/ignore should be a glob, shouldn’t it? That means VSCode plugin has the correct behavior as when I type ‘*png’, the red hightline goes away, as expected. However, if I leave like that, it is webpack the one complaining saying "invalid regular expression when I am building. So it must be eslint-webpack-plugin the one reading wrongly the field. Does this make sense?

javierguzman on Sep 20, 2021