3

Is anyone can explain me, why ESlint (VS Code, WebStorm) is highlighting this variant of import?

import UserBlock from '~/templates/UserBlock'; //js file

.babelrc

"plugins": [
        [
            "babel-plugin-root-import",
            {
                "rootPathSuffix": "./src/",
                "rootPathPrefix": "~/"
            }
        ]
    ]

.eslintrc.js

module.exports = {
  settings: {
    'import/resolver': {
      'babel-plugin-root-import': {
        rootPathPrefix: '~',
        rootPathSuffix: 'src',
      },
    },
  },
};
Wayer
  • 131
  • 5
  • `~` refers to your home directory. You should use something absolute within your project like `/` – japrescott Aug 05 '20 at 08:35
  • @japrescott - you mean I should add this directory to config by itself and can use tilde only in "~" without any subfolders? – Wayer Aug 05 '20 at 09:17
  • 1
    no, I am saying you should NOT use Tilde/`~` in any configuration as that is for sure outside of your project. Replace all your `~` with a `./` – japrescott Aug 05 '20 at 09:29
  • @japrescott could you show me example please? Cause I changed tilde to `!`, or to `src`, and `!/templates/UserBlock`, or `src/templates/UserBlock` - still invalid. – Wayer Aug 05 '20 at 11:37
  • 1
    @japrescott in the context of `babel-plugin-root-import`, the `~` serves as an alias for your project root. So, instead of `../../../src/web/comp/xyz`, you write `~/src/web/comp/xyz` and babel figures out the rest. The plugin [recommends the tilde to refer to your project root][https://github.com/entwicklerstube/babel-plugin-root-import#config], and it has no actual relationship to the shell alias for the user's home directory. – Patrick Fowler Aug 12 '20 at 07:56
  • 1
    @PatFowler thank you for letting me know that this is a 'feature'! :) – japrescott Aug 13 '20 at 08:13

1 Answers1

2

Solution according to docs

From my experience with the "babel-plugin-root-import" plugin, you should change your configuration to:

"plugins": [[
  "babel-plugin-root-import",
    {
      "rootPathPrefix": "~"
      "rootPathSuffix": "src",
    }
 ]]

The extra slashes (/) and dots (.) seem to confuse the plugin.

But ...

Unfortunately, the eslint packages for "babel-plugin-root-import" are not well maintained at this time. Based on your eslintrc, it appears you are using the eslint-import-resolver-babel-root-import package so you "Don't let ESLint be Confused". If you have not installed that package yet, you may want to try that first.

I am currently trying the "eslint-import-resolver-babel-root-import-fixed" fork, which was updated more recently. It is configured slightly differently due to NPM naming collisions; in your eslintrc file, you will need to replace babel-plugin-root-import with eslint-import-resolver-babel-root-import-fixed.

Solution that works

With all that said, I have not been able to get any of these to work. When compiling with babel, there are no problems, but eslint throws the errors as you have described.

My solution for the past couple of years has been to add the following eslint rule:

"import/no-unresolved": [
  "error",
  {
    "ignore": [
      "^[~]",
    ]
  }
]

Another Approach

I use the babel-plugin-root-import because we have multiple root prefixes. If you only need the one, I suggest looking into babel-plugin-module-resolver, though that may have its own set of problems. I've also used "Webpack Module Aliases" in the past, though that may not be available to you.

Patrick Fowler
  • 176
  • 4
  • 13