Still getting import/no-extraneous-dependencies error

[itrelease]

In my .babelrc:

{
  "presets": ["env", "react"],
  "plugins": [
    "react-hot-loader/babel",
    "transform-class-properties",
    "transform-object-rest-spread",
    [
      "module-resolver",
      {
        "alias": {
          "@root": "./src/scripts/",
          "@components": "./src/scripts/components",
          "@reducers": "./src/scripts/reducers",
          "@utils": "./src/scripts/utils"
        }
      }
    ]
  ],
  "retainLines": true
}

in .eslintrc:

...
"settings": {
    "import/resolver": {
      "babel-module": {}
    }
  },
...

but eslint getting error ([eslint] '@components/Block' should be listed in the project's dependencies. Run 'npm i -S @components/Block' to add it (import/no-extraneous-dependencies)) on line:

import { DraggableBlock } from '@components/Block';

[QuentinBrosse]

I had the same issue but downgrading to these versions did the job for me:

"babel-plugin-module-resolver": "^2.5.0",
"eslint-import-resolver-babel-module": "^3.0.0",

[chuck0523]

Below worked fine for me.

"settings": {
    "import/resolver": {
      "babel-module": {
        "root": ["./src"],
        "alias": { "config": "./config" }
      },
    }
  },

Found example in code: https://github.com/tleunen/eslint-import-resolver-babel-module/blob/master/src/index.js#L87

[ndillon1]

@tleunen are you able to address this issue ? I am also having the same problem and the above workarounds do not solve the problem

babel.rc

{
  "presets": ["react-native"],
  "plugins": [
    [
      "module-resolver",
      {
        "alias": {
          "@components": "./app/components",
          "@routes": "./app/routes",
          "@util": "./app/util",
        }
      }
    ]
  ]
}

eslint.js

settings: {
    'import/resolver': {
      node: {
        extensions: ['.js', '.android.js', '.ios.js'],
      },
      'babel-module': {},
    },
    node: true,
  },

[lucasbento]

@tleunen: can you shed some light on this? I thought the plugin wasn't loading the options but it is, not sure what's wrong but I'm getting the same error and everything seems to be configured right:

// .babelrc
{
  "presets": ["react-native"],
  "plugins": [
    [
      "module-resolver",
      {
        "cwd": "babelrc",
        "alias": {
          "@app": "./app",
          "@common": "./app/common",
          "@config": "./app/config",
        }
      }
    ]
  ]
}

// .eslintrc
{
  "parser": "babel-eslint",
  "plugins": [
    "react-native"
  ],
  "env": {
    "jest": true
  },
  "extends": [
    "airbnb",
    "plugin:react-native/all"
  ],
  "settings": {
    "import/resolver": {
      "react-native": {},
      "babel-module": {}
    }
  },
  "rules": {
    "import/no-extraneous-dependencies": ["error", {"devDependencies": ["__tests__/**/*.js", "__mocks__/**/*.js" , "storybook/**/*.js"]}],
  }
}

// package.json
"babel-plugin-module-resolver": "^3.0.0",
"eslint-import-resolver-babel-module": "^4.0.0",

[itrelease]

@lucasbento it seems the problem with @ symbol, so as a workaround you can prefix your stuff with src- or something else like:

"alias": {
  "src-app": "./app",
  "src-common": "./app/common",
  "src-config": "./app/config",
}

[lucasbento]

@itrelease: thanks, that's exactly it!

The problem is that I still want to use @, src- doesn't look very intuitive for me, do you know if there's an specific reason for it to not work?

Edit: I removed any prefix and kept only app/common/config, it works fine that way, good enough, thanks, @itrelease!

[Tomekmularczyk]

I had the same problem with @ prefix. Sad it doesn't work.

[tayfunyasar]

I'm facing same issue and I want to use "@"

[Nopzen]

can confirm also issues with "@" sign

Edit: Sorry for lack of information.

Iam on: babel-plugin-module-resolver: ^5.0.0-beta.0 babel version: ^7.0.0-beta.51

[laugri]

Any news on this ? Running into the same problem.

[ItsNoHax]

How is this still not fixed :( I really want to use "@" to specify that the import is an alias and I'd rather not turn the rule off as it's a valid rule for every other use case.

[tleunen]

@ItsNoHax - Well. I believe we are all developers here. So if something bothers you because it's buggy, other devs will thank you if you actually try to fix it.

Having said that, I'll do my best to take a look at it by end of next week.

[ItsNoHax]

Hey @tleunen, sorry if I came off rude.

Thanks for taking your time to look into it and if you need me to help you verify your solution is correct, just let me know.

[artemjackson]

As workaround you may add "import/core-modules": "@your-package-name" to .eslintrc settings section

[ashton]

I bumped with this issue today and I analysed the code and the problem is at the eslint-plugin-import, more specifically, here.

Our aliases matches with this regex, and this causes the plugin to recognise the import as an external scoped dependency (because it is the same format), so it tries to find it in node_modules and because it's not there it throws the error.

In the open issue the author implicitly says (as far as my interpretation goes) that we shouldn't name our aliases as the same as valid npm packages (or namespaces).

I don't know exactly to fix this without messing with the actual scoped external dependencies, because I didn't look to the rest of the code to see how it works as a whole, but I hope that this info someway helps.