babel-plugin-module-resolver icon indicating copy to clipboard operation
babel-plugin-module-resolver copied to clipboard

Working with a yarn workspace

Open kwelch opened this issue 5 years ago • 6 comments

I am trying to get this to work properly in our monorepo setup.

Here is the project structure:

- packageA
\
 - package.json
- packageB
\
 - package.json
- packageC
\
 - package.json
package.json
babel.config.js
.eslintrc.js

We have the run eslint from the top level across all packages and define the alias in the top level babel.config.js.

The problem I am running into is it is using pkgUp to find the closest package.json based on the currently linted file and then attempting to pull the babel config. Since our aliases are not defined at each level we are getting false failures.

I was able to fix this by making a change to getPluginOptions to default cwd to a config value (root (but that was a bad idea)), then the projectRootDir, but I haven't found a way to do it backwards compatible.

I wanted to get an issue in to describe this issue and see if there is a way that makes sense to try and do this.

kwelch avatar May 16 '19 20:05 kwelch

We were able to work around this by pulling the settings and passing it in the lint options, but I would like to find a way to resolve this so it can properly pull them from the root.

const {loadOptions} = require('@babel/core');

const BABEL_CONFIG = loadOptions({
    filename: __filename,
    envName: 'development',
});
const MODULE_RESOLVER_PLUGIN = BABEL_CONFIG.plugins.find(({key}) => key === 'module-resolver');

then in the config

settings: {
  'import/resolver': {
    'babel-module': MODULE_RESOLVER_PLUGIN.options,
  },
},

kwelch avatar May 17 '19 01:05 kwelch

I also encountered this issue recently. I believe the problem (as described here) is that babel searches upward from a file's directory until it finds a package.json file, then it stops.

So in the monorepo scenario, the searching stops at each package's package.json file and therefore does not pick up on the root level babel and/or eslint configs which define the alias mapping. And this is why ESLint throws the import/no-unresolved errors.

I realize this issue has been open for a while now, so I'm wondering how to properly resolve it. Any solutions?

bellizio avatar Nov 23 '20 20:11 bellizio

@bellizio Your issue is different: if you don't want that "search up until it finds a package.json" behavior, you can use babel.config.json (in your cwd) instead of .babelrc.json.

nicolo-ribaudo avatar Nov 28 '20 10:11 nicolo-ribaudo

@nicolo-ribaudo ok, so given that my directory structure is the same as @kwelch's is in their description of the issue (with no babel config files in the package directories), then I only need to rename my babel.config.js file to babel.config.json at the root level to fix the issue I described?

bellizio avatar Nov 29 '20 14:11 bellizio

I'm not sure because I don't fully know how this plugin works, but my reply was to solve this:

I believe the problem (as described here) is that babel searches upward from a file's directory until it finds a package.json file, then it stops.

So in the monorepo scenario, the searching stops at each package's package.json file and therefore does not pick up on the root level babel and/or eslint configs which define the alias mapping. And this is why ESLint throws the import/no-unresolved errors.

However, that statement is only true for .babelrc files: if you are already using babel.config.js, Babel is already loading the root config and not stopping at package.json. (so my "solution" does not apply to you because I misunderstood the problem)

nicolo-ribaudo avatar Nov 29 '20 14:11 nicolo-ribaudo

@nicolo-ribaudo got it, thanks for clarifying. I am starting to think the issue lies more with eslint than it does with babel at this point.

bellizio avatar Nov 30 '20 13:11 bellizio