Skip to content
This repository has been archived by the owner on Jun 8, 2023. It is now read-only.

not resolving node_modules, aliases or relative imports in vscode #61

Open
davemcorwin opened this issue Jun 2, 2017 · 53 comments
Open

Comments

@davemcorwin
Copy link

screen shot 2017-06-02 at 9 08 02 am

screen shot 2017-06-02 at 9 07 43 am

.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
Copy link
Owner

tleunen commented Jun 2, 2017

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
Copy link
Author

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
Copy link
Author

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

@davemcorwin
Copy link
Author

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
Copy link
Owner

tleunen commented Jun 2, 2017

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
Copy link
Author

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
Copy link
Author

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
Copy link
Author

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
Copy link
Author

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
Copy link
Owner

tleunen commented Jun 2, 2017

What do you mean by v2 vs v3?

@davemcorwin
Copy link
Author

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
Copy link
Owner

tleunen commented Jun 2, 2017

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

@pkuczynski
Copy link

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

@davemcorwin
Copy link
Author

@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
Copy link

kmck commented Jun 16, 2017

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?

@tleunen
Copy link
Owner

tleunen commented Jun 16, 2017

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
Copy link

kmck commented Jun 16, 2017

No dice. Same issue with [email protected] + [email protected]

@tleunen
Copy link
Owner

tleunen commented Jun 16, 2017

Thank you, I'll reopen and make some tests

@tleunen tleunen reopened this Jun 16, 2017
@Darex1991
Copy link

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"
      }
    }]
  ]
}

@pkuczynski
Copy link

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
Copy link

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

@pkuczynski
Copy link

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

@ryanblakeley
Copy link

Getting a similar problem to what others have mentioned.

Working (v2):

  • eslint-import-resolver-babel-module@v2
  • babel-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"]
    }],
  ]
}

@mshick
Copy link

mshick commented Aug 18, 2017

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
Copy link

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
Copy link
Owner

tleunen commented Oct 9, 2017

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
Copy link

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
Copy link
Owner

tleunen commented Oct 19, 2017

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
Copy link

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.

@tleunen
Copy link
Owner

tleunen commented Oct 19, 2017

Could you also share your plugin config?

@jacobmischka
Copy link

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
Copy link

jacobmischka commented Oct 19, 2017

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
Copy link
Owner

tleunen commented Oct 19, 2017

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

@jacobmischka
Copy link

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
Copy link

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
Copy link

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

@tleunen
Copy link
Owner

tleunen commented Oct 19, 2017

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
Copy link

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

@benbender
Copy link

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
Copy link

shqld commented Nov 3, 2017

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

@parohy
Copy link

parohy commented Nov 15, 2017

@shqld OH! Reloading the VSCode actually did it!

@Izhaki
Copy link

Izhaki commented Feb 22, 2018

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
Copy link

ItsTarik commented May 13, 2018

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:
image

@efossvold
Copy link

@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
Copy link

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
Copy link

sylinus commented May 27, 2018

@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
Copy link

that was quite confusing.

@jefrydco
Copy link

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

@thinklinux
Copy link

thinklinux commented Jul 17, 2018

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

@bailer
Copy link

bailer commented Aug 3, 2018

@ItsTarik works like a charm, thank you!

@ItsTarik
Copy link

glad that the config worked for all of you! @jefrydco i just combined some configs from many places, that was kind of mysterious.

@jieliu218
Copy link

@ItsTarik it

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

@aprilmintacpineda
Copy link

aprilmintacpineda commented Oct 29, 2020

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/*"
      ],
    }
  },
}

image

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests