eslint-import-resolver-babel-module
eslint-import-resolver-babel-module copied to clipboard
tleunen
not resolving node_modules, aliases or relative imports in vscode
.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?
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
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?
Also, it is something within eslint itself not VSCode, i have the same issues in Atom and running on the command line.
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
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?
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 ?
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.
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
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.
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"
}
@davemcorwin which package you downgraded to 2.2.1? I have a similar issue...
@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.
I'm having a similar problem with "root": ["."] in my .babelrc triggering import/no-unresolved when using[email protected]. Downgrading to 2.2.1 fixed the problem. I have [email protected] 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?
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.
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",
"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"
}
}]
]
}
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
Well, I am not doing react native and only left the note for others, who might encounter similar issue :)
Getting a similar problem to what others have mentioned.
Working (v2):
eslint-import-resolver-babel-module@v2babel-plugin-module-resolver@v2
Breaking (beta):
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"]
}],
]
}
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.
I got it working with @davemcorwin suggestion of downgrading.
"babel-plugin-module-resolver": "^2.7.1", "eslint-import-resolver-babel-module": "2.2.1",
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.
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!
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.
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 [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning "[email protected]" has incorrect peer dependency "flow-bin@^0.55.0".
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 4 new dependencies.
├─ [email protected]
├─ [email protected]
├─ [email protected]
└─ [email protected]
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 [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning "[email protected]" has incorrect peer dependency "flow-bin@^0.55.0".
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 2 new dependencies.
├─ [email protected]
└─ [email protected]
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.
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": {}
}
}
}
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.
What about the babel plugin config? Only the module-resolver config would be fine
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"
]
}
}
}
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",
Oh it's because I overrode extensions without adding .js isn't it, sorry my mistake!
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']
Yeah oops, thank you! Missed that it says it overrides it and not merges, my fault!
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.
Reloading editor could be helpful, if you are seeing errors only in VSCode (not in CLI).
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",
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:
@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!
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 ?
@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 Adding jsconfig.json saves me a lot, anyway how could you figure out that configuration?
glad that the config worked for all of you! @jefrydco i just combined some configs from many places, that was kind of mysterious.
@ItsTarik it
settings: { 'import/resolver': { 'babel-module': { root: ['./src'], }, }, }, This part is userful
I have something like _screens as my alias, but eslint complains that it's not found
on .eslintrc.js
settings: {
react: {
version: 'detect'
},
'import/ignore': ['react-native'],
'import/resolver': {
'babel-module': {
alias
}
}
}
import aliases:
module.exports = {
_components: './src/components',
_screens: './src/screens',
_fluxible: './src/fluxible',
_graphql: './src/graphql',
_root: './src'
};
on babe.config.js
const alias = require('./importAliases');
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
[
'module-resolver',
{
root: ['./src'],
alias
}
]
],
env: {
production: {
plugins: ['react-native-paper/babel']
}
}
};
jsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"*": [
"src/*"
],
}
},
}
