How to instruct Eslint to solve absolute paths with Babel-plugin-root-import in monorepos

Asked

Viewed 190 times

-1

I own a repository monorepo done with Yarn and in this I have a project frontend created with the command create-react-app. I installed the libs React-app-rewired and customize-Cra to inject the settings to the plugin’s Babel Babel-plugin-root-import and these are working correctly, my project runs error-free, follows code from my config-overrides.js file

const { addBabelPlugin, override } = require('customize-cra');

module.exports = override(
  addBabelPlugin([
    'babel-plugin-root-import',
    {
      rootPathSuffix: 'src',
    },
  ])
);

The problem is with mine Eslint which does not recognize the paths of my files. I installed the lib Eslint-import-resolve-Babel-plugin-root-import to handle situation, and added to my file .eslintrc.json the following configuration

"settings": {
  "import/resolver": {
    "babel-plugin-root-import": {
      "rootPathSuffix": "src"
    }
  }
}

Despite the instructions in the configuration file Eslint comply with the instructions in documentation, the Eslint continues not to recognize file paths as valid. I am imported my files as follows

import SignIn from '~/pages/SignIn';
import SignUp from '~/pages/SignUp';
import Dashboard from '~/pages/Dashboard';
import Profile from '~/pages/Profile';
javascript react babel eslint

1 answer

0


The problem occurs because of the structure of monorepo of the project. In the file settings Eslint the parameter of rootPathSuffix of Babel-plugin-root-import part of the project root and NOT of the directory where the file Eslint is. To be clearer, the structure below represents a model monorepo of Yarn.

frontend
- src
- package.json
- .eslintrc.json
mobile
- src
- package.json
- .eslintrc.json
package.json
.editorconfig

The projects of frontend and mobile have different settings of Eslint, to configure the Babel-plugin-root-import for the project of mobile for example, the following configuration is required:

"settings": {
  "import/resolver": {
    "babel-plugin-root-import": {
      "rootPathSuffix": "mobile/src"
    }
  }
}

In any folder structure of your project, add the value of the parameter rootPathSuffix so that the whole path of the project, going from its root to the desired directory, is contemplated in the value.

Browser other questions tagged javascript react babel eslint

You are not signed in. Login or sign up in order to post.