-
Notifications
You must be signed in to change notification settings - Fork 31
not resolving node_modules, aliases or relative imports in vscode #61
Comments
Could you show me the structure of your project? |
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
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:
The |
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
to
|
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. |
What do you mean by v2 vs v3? |
in package.json for this repo:
But in Next.js (and my app):
|
Oh yes, indeed, in that case you cannot use the v3 beta version |
@davemcorwin which package you downgraded to 2.2.1? I have a similar issue... |
@pkuczynski |
I'm having a similar problem with Interestingly, if I specify |
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. |
No dice. Same issue with |
Thank you, I'll reopen and make some tests |
Hi ;) The same here:
My conf:
.babelrc:
|
I ended up using |
But for react-native it's a bad idea to use webpack server ;) |
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):
Breaking (beta): With the beta packages, the aliases work but files in the root throw
|
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 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", |
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 It seems like 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:
|
Could you also share your plugin config? |
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: |
Oh it's because I overrode |
Might be an error on our side. Instead of merging the extensions, we're replacing them. So because you specify |
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 |
Reloading editor could be helpful, if you are seeing errors only in VSCode (not in CLI). |
@shqld OH! Reloading the VSCode actually did it! |
Fresh
Per @psychobolt suggestion, this solves it:
|
@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:
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:
in my .eslintrc settings:
and the .babelrc plugins:
also inside jsconfig.json i got this config so vscode could auto complete resolved modules:
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! |
that was quite confusing. |
@ItsTarik Adding |
@ItsTarik working for me even with |
@ItsTarik works like a charm, thank you! |
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: { |
I have something like on 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 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']
}
}
};
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"*": [
"src/*"
],
}
},
} |
.babelrc
.eslintrc.yml
any thoughts? something I am doing wrong?
The text was updated successfully, but these errors were encountered: