Babel-plugin-module-resolver: Alias pointing to different projects

Created on 9 Nov 2017  路  7Comments  路  Source: tleunen/babel-plugin-module-resolver

Hey all,

Got some issues about module resolution:

webpack has external modules that I proxy from another project on another port when running on the browser.
Good - it works.

When it comes to testing: I used this module to resolve jest imports because jest actually needs them to generate specific mock functions. So I just use:

 "alias": { "project-core": "../../project-core/components"  }

Good - it works, jest is happy. The problem happens when those required modules (from project-core) also has `import C from 'project-core/components'.

Any insights how to solve this?

I thought of renaming imports from ''project-core" modules since there's a lot of projects that are using imports like this, maybe it's not even an issue to be here but wanted to share this here - Well, I think it could be solved by this plugin if the plugin always looked for the nearest .babelrc config, given the file cwd.

Not sure if I was clear, let me know if I wasn't.

Most helpful comment

Happy to help :) Thank you!

All 7 comments

Do you mean that we also resolve project-core/components from the required modules, or that we don't?

All files read by babel will be transformed, so if an import match the alias, they will also be transformed based on the babelrc configuration file.

But, if your other project also use a custom module resolution via the plugin, you can force the resolution to use the closest babelrc configuration based on the file. So your file in your other project should use its own babelrc configuration instead of the one in your main project.
You can do so by using the cwd option with the value babelrc (See https://github.com/tleunen/babel-plugin-module-resolver/blob/master/DOCS.md#cwd)

Thanks for the quick response!
I meant - the file imported from project-core was using the .babelrc config set on the other project.
You got it right - thanks @tleunen!

What I missed was that "cwd" config set to babelrc on both projects, it worked, thanks!

Happy to help :) Thank you!

I have this in the .babelrc of both projects. It doesn't seem to be working for me. Any ideas?
"cwd": "babelrc",

Both projects have this alias
"common": "content/common",

SubjectProject

  "plugins": [
    [
      "module-resolver",
      {
        "root": ["./"],
        "cwd": "babelrc",
        "alias": { "common": "content/common" }
      }
    ]
  ],

OtherProject:

  "plugins": [
    [
      "module-resolver",
      {
        "root": ["./"],
        "cwd": "babelrc",
        "alias": {
          "common": "content/common",
          "hh2": "../../../../OtherProject/client/content"
        }
      }
    ]
  ],

This is imported in the remote file and is found when working in "OtherProject" but not "SubjectProject":
Module not found: Error: Can't resolve 'content/common/notifications/actions/add'

Thank you!

Is it a problem to have the same alias name in both projects?
"common": "content/common",
Thanks

I got it. Sorry for the noise.
I was specifying plugins in webpack and .babelrc and I was only updating .babelrc so I pulled it out of webpack and now just have .babelrc so it's working correctly. Thanks

Was this page helpful?
0 / 5 - 0 ratings