not resolving node_modules, aliases or relative imports in vscode

[davemcorwin]

.babelrc

{
  "plugins": [
    [
      "module-resolver",
      {
        "root": [
          "."
        ],
        "alias": {
          "styles": "./styles",
          "components": "./components",
          "lib": "./lib",
          "pages": "./pages",
          "gql": "./gql"
        },
        "cwd": "babelrc"
      }
    ],
...
}

.eslintrc.yml

---
  env:
    browser: true
    node: true
    es6: true
  parser: babel-eslint
  parserOptions:
    sourceType: module
    ecmaFeatures:
      experimentalObjectRestSpread: true
      jsx: true
      impliedStrict: true
  plugins:
    - react
  extends:
    - eslint:recommended
    - plugin:react/recommended
    - plugin:import/errors
    - plugin:import/warnings    
  settings:
    import/resolver: babel-module

any thoughts? something I am doing wrong?

[tleunen]

Could you show me the structure of your project? If you have a public repo with the issue, I'd love to take a look

[davemcorwin]

Thanks for the quick response! Unfortunately, its not a public repo. I'm using Next.js and sticking with their file structure so far, but its nothing unusual (other than not having a root src dir):

• /
  • node_modules
  • components
  • pages
  • gql
  • lib
  • .babelrc
  • .eslintrc.yml
  • etc...

It seems strange that it can't resolve stuff from node_modules, is there a decent way to debug this so I can be a bit more helpful?

[davemcorwin]

Also, it is something within eslint itself not VSCode, i have the same issues in Atom and running on the command line.

[davemcorwin]

sorry to spam, here is my entire .babelrc:

{
  "plugins": [
    [
      "module-resolver",
      {
        "root": [
          "."
        ],
        "alias": {
          "styles": "./styles",
          "components": "./components",
          "lib": "./lib",
          "pages": "./pages",
          "gql": "./gql"
        },
        "cwd": "babelrc"
      }
    ],
    [
      "wrap-in-js",
      {
        "extensions": [
          "css$",
          "scss$"
        ]
      }
    ],
    [
      "lodash",
      {
        "id": [
          "lodash",
          "recompose"
        ]
      }
    ],
    "babel-plugin-inline-import-graphql-ast",
    "inline-dotenv"
  ],
  "presets": [
    "next/babel"
  ],
  "env": {
    "test": {
      "presets": [
        {
          "modules": "commonjs"
        }
      ]
    }
  },
  "ignore": []
}

The next/babel preset can be found here

[tleunen]

I bet this is some strange edge cases with the custom root being ".".

Could you try removing it, but keeping your alias for the directories?

[davemcorwin]

no change. Wondering if it can find the file, since it displays the module in the popup (see screenshots above), but for some reason it can't resolve the export. Could it be something i'm missing on the babel side ?

[davemcorwin]

the aliases work in the actual application so I think that the module-resolver config in .babelrc is ok, its just eslint that can't find it.

[davemcorwin]

Hmm, i got it to work for node_modules and relative paths by changing the following in my .eslintrc.yml:

from

  settings:
    import/resolver: babel-module

to

  settings:
    import/resolver:
      babel-module:
        foo: bar

[davemcorwin]

OK. I downgraded to v2.2.1 and everything works. My hunch (not confirmed) is that the issue was caused by this where you're trying to identify the babel-plugin-module-resolver plugin by checking equality of a function. In my case, the newest version of this requires v3.x of that plugin, but my project requires v2.x so that equality check was never true and the configuration (especially my aliases) from my .babelrc was never taken into account.

[tleunen]

What do you mean by v2 vs v3?

[davemcorwin]

in package.json for this repo:

"peerDependencies": {
    ....
    "babel-plugin-module-resolver": ">3.0.0-beta"
  },

But in Next.js (and my app):

  "dependencies": {
    ...
    "babel-plugin-module-resolver": "2.6.2"
}

[tleunen]

Oh yes, indeed, in that case you cannot use the v3 beta version

[pkuczynski]

@davemcorwin which package you downgraded to 2.2.1? I have a similar issue...

[davemcorwin]

@pkuczynski eslint-import-resolver-babel-module v2.2.1. Its not the specific version that matters as much as making sure that all of your dependencies are using the same version of babel-plugin-module-resolver.

[kmck]

I'm having a similar problem with "root": ["."] in my .babelrc triggering import/no-unresolved when usingeslint-import-resolver-babel-module@3.0.0. Downgrading to 2.2.1 fixed the problem. I have babel-plugin-module-resolver@v2.7.1 installed.

Interestingly, if I specify root as an absolute path, it does work, so @tleunen I think you might be right about it being some kind of edge case. Do you want a fresh issue on this?

[tleunen]

It would be interesting to see if you have the issue while using the beta version for both the babel plugin and the eslint plugin, as we're moving towards this version.

[kmck]

No dice. Same issue with eslint-import-resolver-babel-module@4.0.0-beta.2 + babel-plugin-module-resolver@3.0.0-beta.2

[tleunen]

Thank you, I'll reopen and make some tests

[Darex1991]

Hi ;) The same here: I tried: 1)

"babel-plugin-module-resolver": "2.7.1",
"eslint-import-resolver-babel-module": "3.0.0",
"eslint-plugin-import": "2.3.0",

2)

"babel-plugin-module-resolver": "2.6.0",
"eslint-import-resolver-babel-module": "2.2.0", (and 2.2.1)
"eslint-plugin-import": "2.2.0",

My conf: eslint.yml:

settings:
  import/resolver:
    babel-module: {}

.babelrc:

{
  "presets": ["react-native"],
  "plugins": [
    ["module-resolver", {
      "cwd": "babelrc",
      "root": ["./app"],
      "alias": {
        "app": "./app",
        "inspection": "./app/inspection",
        "shared": "./app/components/shared"
      }
    }]
  ]
}

[pkuczynski]

I ended up using eslint-import-resolver-webpack, which works just perfectly! Additionally, I am using babel-plugin-webpack-alias to use webpack aliases in babel/mocha

[Darex1991]

But for react-native it's a bad idea to use webpack server ;)

[pkuczynski]

Well, I am not doing react native and only left the note for others, who might encounter similar issue :)

[ryanblakeley]

Getting a similar problem to what others have mentioned.

Working (v2):

• eslint-import-resolver-babel-module@v2
• babel-plugin-module-resolver@v2

Breaking (beta):

• eslint-import-resolver-babel-module@v4.0.0-beta.3
• babel-plugin-module-resolver@v3.0.0-beta.4

With the beta packages, the aliases work but files in the root throw Unexpected token import. With the later, if I change the import syntax to require in the file that is in root (./file.js), everything works. But I'm sticking with v2 just so the import syntax works in that one file.

.eslintrc

{
  "parser": "babel-eslint",
  "parserOptions": {
    "ecmaVersion": 7,
    "sourceType": "module",
    "allowImportExportEverywhere": true,
    "ecmaFeatures": {
      "jsx": true,
      "modules": true
    }
  },
  "plugins": ["react", "babel"],
  "extends": ["eslint:recommended", "plugin:react/recommended", "airbnb"],
  "settings": {
    "import/resolver": {
      "babel-module": {}
    }
  },
  ...
}

.babelrc

{
  "presets": ["env", "airbnb"],
  "plugins": [
    "react-hot-loader/babel",
    "transform-decorators",
    "transform-class-properties",
    "./relayPlugin",
    ["module-resolver", {
      "root": ["./src", "./spec"]
    }],
  ]
}

[mshick]

I'm also having problems with the eslint resolver, while the babel portion is working correctly.

Oddly, in my case, I only have eslint resolution problems if the import location is 5 directories deep relative to the working directory. The exact same import at 4 levels deep has no issues. The location of the files that are being imported seems to make no difference.

I've tried going to v2, as was suggested in this thread, but that makes no difference.

[psychobolt]

I got it working with @davemcorwin suggestion of downgrading.

"babel-plugin-module-resolver": "^2.7.1", "eslint-import-resolver-babel-module": "2.2.1",

[tleunen]

Please provide with a real project to easily reproduce the issue. From my usage, everything looks fine with Code so it must be some sort of a configuration conflict.

[jacobmischka]

I think the problem is that currently eslint-import-resolver-babel-module@latest resolves to 4.0.0-beta.3, which isn't compatible with babel-plugin-module-resolver@latest.

It seems like @beta for both aren't compatible either unfortunately, but locking them to what @psychobolt suggested is working.

Thanks for all your work on this great package!

[tleunen]

Both beta should work together. I'd love having a project to play with. Since I'm not able.to reproduce your issues with my setup.

[jacobmischka]

Sorry, this is a private project. I'll try to throw something together tonight if I have time. But here's a log:

$ yarn add -D babel-plugin-module-resolver@beta eslint-import-resolver-babel-module@beta
yarn add v1.2.1
[1/4] Resolving packages...
[2/4] Fetching packages...
warning Pattern ["esprima-fb@~3001.0001.0000-dev-harmony-fb"] is trying to unpack in the same destination "/home/mischka/.cache/yarn/v1/npm-esprima-fb-3001.1.0-dev-harmony-fb-b77d37abcd38ea0b77426bb8bc2922ce6b426411" as pattern ["esprima-fb@~3001.1.0-dev-harmony-fb"]. This could result in a non deterministic behavior, skipping.
info fsevents@1.1.2: The platform "linux" is incompatible with this module.
info "fsevents@1.1.2" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning "eslint-plugin-flowtype-errors@3.3.4" has incorrect peer dependency "flow-bin@^0.55.0".
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 4 new dependencies.
├─ babel-plugin-module-resolver@3.0.0-beta.5
├─ eslint-import-resolver-babel-module@4.0.0-beta.5
├─ pkg-up@2.0.0
└─ reselect@3.0.1
Done in 4.91s.

$ yarn lint
yarn run v1.2.1
$ eslint resources/assets/js --ext .js,.vue && flow

/home/mischka/projects/residentprogram/resources/assets/js/modules/case-log-details-schema.js
  2:27  error  Unable to resolve path to module 'jsonschema'  import/no-unresolved

/home/mischka/projects/residentprogram/resources/assets/js/modules/datatable-utils.js
  4:8  error  Unable to resolve path to module 'twix'  import/no-unresolved

/home/mischka/projects/residentprogram/resources/assets/js/vue-components/MediumEditor.vue
  23:22  error  Unable to resolve path to module 'lodash/debounce'  import/no-unresolved

/home/mischka/projects/residentprogram/resources/assets/js/vue-components/Reports/AggregateReport.vue
  70:19  error  Unable to resolve path to module 'color'  import/no-unresolved

/home/mischka/projects/residentprogram/resources/assets/js/vue-components/Reports/FormReport.vue
  166:19  error  Unable to resolve path to module 'lodash/round'  import/no-unresolved

/home/mischka/projects/residentprogram/resources/assets/js/vue-components/Reports/FormReportQuestion.vue
  196:19  error  Unable to resolve path to module 'lodash/round'  import/no-unresolved

/home/mischka/projects/residentprogram/resources/assets/js/vue-components/Reports/IndividualReport.vue
  138:19  error  Unable to resolve path to module 'color'  import/no-unresolved

/home/mischka/projects/residentprogram/resources/assets/js/vue-components/Reports/StatsReport.vue
  90:19  error  Unable to resolve path to module 'color'  import/no-unresolved

/home/mischka/projects/residentprogram/resources/assets/js/vue-components/RichNumber.vue
  8:19  error  Unable to resolve path to module 'color'  import/no-unresolved

/home/mischka/projects/residentprogram/resources/assets/js/vue-components/SelectTwo.vue
  20:21  error  Unable to resolve path to module 'lodash/isEqual'  import/no-unresolved

✖ 10 problems (10 errors, 0 warnings)

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

$ yarn add -D babel-plugin-module-resolver@^2.7.1 eslint-import-resolver-babel-module@^2.2.1
yarn add v1.2.1
[1/4] Resolving packages...
[2/4] Fetching packages...
warning Pattern ["esprima-fb@~3001.0001.0000-dev-harmony-fb"] is trying to unpack in the same destination "/home/mischka/.cache/yarn/v1/npm-esprima-fb-3001.1.0-dev-harmony-fb-b77d37abcd38ea0b77426bb8bc2922ce6b426411" as pattern ["esprima-fb@~3001.1.0-dev-harmony-fb"]. This could result in a non deterministic behavior, skipping.
info fsevents@1.1.2: The platform "linux" is incompatible with this module.
info "fsevents@1.1.2" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning "eslint-plugin-flowtype-errors@3.3.4" has incorrect peer dependency "flow-bin@^0.55.0".
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 2 new dependencies.
├─ babel-plugin-module-resolver@2.7.1
└─ eslint-import-resolver-babel-module@2.2.1
Done in 4.60s.

$ yarn lint
yarn run v1.2.1
$ eslint resources/assets/js --ext .js,.vue && flow
Launching Flow server for /home/mischka/projects/residentprogram
Spawned flow server (pid=14475)
Logs will go to /tmp/flow/zShomezSmischkazSprojectszSresidentprogram.log
No errors!
Done in 10.03s.

[tleunen]

Could you also share your plugin config?

[jacobmischka]

Sure!

{
    "parser": "vue-eslint-parser",
    "parserOptions": {
        "parser": "babel-eslint",
        "ecmaVersion": 2017,
        "sourceType": "module",
        "ecmaFeatures": {
            "modules": true,
            "jsx": true
        }
    },
    "env": {
        "browser": true,
        "es6": true,
        "jquery": true,
        "jest/globals": true
    },
    "plugins": [
        "vue",
        "compat",
        "import",
        "jest"
    ],
    "extends": [
        "eslint:recommended",
        "plugin:import/errors",
        "plugin:vue/recommended"
    ],
    "rules": {
        "no-console": ["warn", { "allow": ["warn", "error" ] }],
        "no-var": "warn",
        "eqeqeq": ["warn", "smart"],
        "semi": ["warn", "always"],
        "no-spaced-func": "warn",
        "comma-style": "warn",
        "comma-spacing": "warn",
        "key-spacing": "warn",
        "compat/compat": 2,
        "vue/jsx-uses-vars": 2,
        "vue/require-v-for-key": "off",
        "vue/no-confusing-v-for-v-if": "off"
    },
    "settings": {
        "polyfills": [
            "promise",
            "fetch",
            "dataset"
        ],
        "coverage": false,
        "compiler": "babel",
        "import/resolver": {
            "babel-module": {}
        }
    }
}

[jacobmischka]

It's a bit of a bloated mess. If you can't reproduce the problem then it's probably because of the vue parser. If it's still happening when both betas are released I'll consider raising an issue there if it looks like they're the culprit.

[tleunen]

What about the babel plugin config? Only the module-resolver config would be fine

[jacobmischka]

Oh sorry, of course.

{
    "presets": [
        "flow",
        ["env", {
            "targets": {
                "browsers": [
                    "> 1%",
                    "last 2 versions",
                    "ie >= 9"
                ]
            },
            "useBuiltIns": true,
            "debug": false,
            "modules": false
        }]
    ],
    "plugins": [
        ["module-resolver", {
            "alias": {
                "vue-flatpickr": "@jacobmischka/vue-flatpickr",
                "@": "./resources/assets/js"
            },
            "extensions": [
                ".vue"
            ]
        }],
        "syntax-dynamic-import",
        ["transform-object-rest-spread", {
            "useBuiltIns": true
        }],
        "transform-vue-jsx"
    ],
    "env": {
        "test": {
            "presets": [
                "flow",
                ["env", {
                    "targets": {
                        "node": "current"
                    },
                    "useBuiltIns": true,
                    "debug": false
                }]
            ],
            "plugins": [
                "dynamic-import-node",
                ["transform-object-rest-spread", {
                    "useBuiltIns": true
                }],
                "transform-vue-jsx"
            ]
        }
    }
}

[psychobolt]

Hello!

This issue has not reproduced for me. My repo: https://github.com/psychobolt/react-electron-boilerplate

Since then I've used: "babel-plugin-module-resolver": "^2.7.1" "eslint-import-resolver-babel-module": "^3.0.0",

[jacobmischka]

Oh it's because I overrode extensions without adding .js isn't it, sorry my mistake!

[tleunen]

Might be an error on our side. Instead of merging the extensions, we're replacing them. So because you specify .vue as an extension. Only those files will be used. Try replacing the extensions with this (adding vue): ['.js', '.jsx', '.es', '.es6', '.mjs', '.vue']

[jacobmischka]

Yeah oops, thank you! Missed that it says it overrides it and not merges, my fault!

[benbender]

I do also had problems with different combinations of babel-plugin-module-resolver & eslint-import-resolver-babel-module. It turns out that its not about the versioning of those two packages directly but a combination with the 7.x-beta with babel's core-infrastructure. If I downgrade babel to stable versions latest stable and betas of the import-modules are working fine. If I install babel + presets + plugins with @next, I got different errors. I don't have the time atm to do more debugging, but maybe that's the explanation why reproducing of these issues is so hard.

[shqld]

Reloading editor could be helpful, if you are seeing errors only in VSCode (not in CLI).

[parohy]

@shqld OH! Reloading the VSCode actually did it!

[Izhaki]

Fresh npm install doesn't work:

"babel-plugin-module-resolver": "3.1.0",
"eslint-import-resolver-babel-module": "4.0.0",
"babel-core": "^6.26.0",
"eslint": "^4.15.0",

Per @psychobolt suggestion, this solves it:

"babel-plugin-module-resolver": "^2.7.1",
"eslint-import-resolver-babel-module": "2.2.1",

[ItsTarik]

in my case i am using rollup to bundle nodejs project, i'm using vscode, the solution of changing the version like:

"babel-plugin-module-resolver": "^2.7.1", or v2
"eslint-import-resolver-babel-module": "2.2.1", or v2

is working with eslint but getting this error with rollup:

[efossvold]

@benbender is correct. After tearing my hair out spending hours to fix this I finally sorted it out. I had to make sure all versions of packages in my own project matched the version node_modules/eslint-import-resolver-babel-module/package.json. This includes:

• @babel packages (7.0.0-beta.34)
• eslint (4.8.0)
• babel-plugin-module-resolver (3.0.0)
• eslint-plugin-import (2.7.0, though it works with 2.8.0 too)

After doing this all imports resolved correctly. Thank you @benbender!

[ItsTarik]

After trying lots of non detailed solutions that didn't worked well for me, i made it working using all last versions:

• "@babel/core": "^7.0.0-beta.46",
• "eslint": "^4.19.1",
• "eslint-plugin-import": "^2.11.0",
• "babel-plugin-module-resolver": "^3.1.1",
• "eslint-import-resolver-babel-module": "^4.0.0"

in my .eslintrc settings:

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

and the .babelrc plugins:

"plugins": [
    [
      "module-resolver",
      {
        "root": ["./src"]
      }
    ]
  ]

also inside jsconfig.json i got this config so vscode could auto complete resolved modules:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "*": ["src/*"]
    }
  }
}

Who could verify this ?

[sylinus]

@ItsTarik , I already had the same modules, .babelrc and jsconfig.json as yours. I added your eslint config to my existing one and it finally worked for me!

[ItsTarik]

that was quite confusing.

[jefrydco]

@ItsTarik Adding jsconfig.json saves me a lot, anyway how could you figure out that configuration?

[thinklinux]

@ItsTarik working for me even with babel-core": "^6.26.0. Thanks.

[bailer]

@ItsTarik works like a charm, thank you!