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

Babel 7 + monorepo #100

Closed
karolis-sh opened this issue Apr 1, 2019 · 7 comments · Fixed by #101
Closed

Babel 7 + monorepo #100

karolis-sh opened this issue Apr 1, 2019 · 7 comments · Fixed by #101

Comments

@karolis-sh
Copy link
Contributor

After updating to babel 7 in our monorepo project, I noticed that running ESlint from root directory the aliases fail. Thought running ESlint from the ./packages/my-lib it validates as expected.

(The code runs and transpiles via babel fine)

Dependencies:

{
    "@babel/core": "^7.4.0",
    "@babel/plugin-proposal-class-properties": "^7.4.0",
    "@babel/preset-env": "^7.4.2",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.5",
    "babel-plugin-module-resolver": "^3.2.0",
    "eslint-import-resolver-babel-module": "^5.0.1",
    "eslint-plugin-import": "^2.16.0",
}

Also yarn - 1.13.0 and "lerna": "^3.10.6",

<project-root>/.eslintrc.json:

{
  "extends": ["..."],
  "env": {
    "browser": true,
    "jest": true
  },
  "parser": "babel-eslint",
  "settings": {
    "import/resolver": {
      "babel-module": {}
    }
  },
  "rules": {}
}

<project-root>/packages/my-lib/.babelrc:

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "idx",
    [
      "module-resolver",
      {
        "alias": {
          "~": "./src"
        }
      }
    ]
  ]
}

The error:

Unable to resolve path to module '~/app/constants' import/no-unresolved

I'd be happy to submit a MR if someone would provide a hint :)

@tleunen
Copy link
Owner

tleunen commented Apr 1, 2019

Hmm.. I wonder if this is because the eslint config is not in the same directory as the babel config.

You could try to play with the cwd option. I believe that having cwd: 'babelrc', might fix it for you.

@karolis-sh
Copy link
Contributor Author

karolis-sh commented Apr 1, 2019

I tried both "cwd": "babelrc", and "cwd": "packagejson", - no success.

Also tried to make the root .eslintrc.json file as "root": true, and move the import/resolver part to /packages/my-lib/.eslintrc.json with the same result.

@tleunen
Copy link
Owner

tleunen commented Apr 1, 2019

root: true is used by eslint only, not really by the plugin.
Is the babel plugin working fine for you? Only eslint has issues?

I'd try to see the output of these lines in your case. Maybe you can find what needs to be fixed. I never tried to setup the plugin in a monorepo, so it might as well be a valid issue ;)

@karolis-sh
Copy link
Contributor Author

Yes, the babel plugin itself runs as expected - resolves the aliases and transpiles the code. Only the ESlint has this issue.

Ok, I'll try to look into this later.

@essensx
Copy link

essensx commented Apr 25, 2019

It affects my monorepo setup, i now get warnings every time i run eslint. Is there any chance to resolve this anytime soon?

tleunen pushed a commit that referenced this issue Apr 25, 2019
Passes the correct cwd to babel's OptionManager to determine the babelrc location.

Fixes #100
@phatNfqAsia
Copy link

phatNfqAsia commented Jun 5, 2020

I still get the eslint error despite the fix commit. Can you provide a more specific example so that I can follow?

What I did is that I add :

./projects/ui/.babelrc

  "plugins": [
    ["module-resolver", {
      "cwd": ".babelrc", // either babelrc or packagejson did not work
      "alias": {
        "~": "./src"
      }
    }],]

./.eslintrc

"settings": {
    "import/resolver": {
      "babel-module": {
        "alias": {
          "~": "./src"
        }
      },
      "node": {
        "moduleDirectory": ["node_modules", "src"],
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      }
    }
  }

and I still get

import _var from '~/styles/variableStyles';
Unable to resolve path to module '~/styles/variableStyles'.eslint(import/no-unresolved)

The babel-module-resolver work well but this lint error is like an annoying itch

@karolis-sh
Copy link
Contributor Author

The minimal setup would be something like this:

./projects/ui/.babelrc:

  
{
  "plugins": [
    ["module-resolver", {
      "alias": {
        "~": "./src"
      }
    }]
  ]
}

./.eslintrc:

{
  "parser": "babel-eslint",
  "settings": {
    "import/resolver": {
      "babel-module": {}
    }
  }
}

(the parser might be optional, I don't have a bare-bones example at the moment)

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

Successfully merging a pull request may close this issue.

4 participants