Babel-plugin-module-resolver: Unable to properly alias directly from src

[kkomaz]

I am having a minor issue accessing my components directly from my src folder. Every folder outside of my src files I am able to access via absolute path. I'm not sure exactly what I need to modify to get this working

file structure

- __tests__
- src
  - display
    - component-1-folder
       * index.jsx
    - component-2-folder
       * index.jsx
- .babelrc

From my test folder I can access component 1 via src/display/component-1-folder
However, if I try to access component 1 from the component 2 file I get the Unable to resolve path to module

My .babelrc file is

{
  "presets": ["es2015", "stage-1", "react"],
  "plugins": [
    ["module-resolver", {
      "root": ["./src"],
      "alias": {
        "src": "./src",
      }
    }]
  ]
}

Thanks in advance!

[tleunen]

Hey @kkomaz,

So, based on your config, it seems the alias config is not needed. If you only keep the root config, you'll be able to access your components via display/component-1-folder. If you want to keep /src in the path, you can keep the alias and remove the root instead.

Would you be able to retrieve the generated path the plugin creates for the component-1-folder when it compiles component-2-folder/index.jsx?

[kkomaz]

@tleunen
Thanks for the advice on .babelrc modifications. Will remove the root.
How would I go about retrieving that generated path?

4:23 error Unable to resolve path to module 'src/display/AddRemove' import/no-unresolve

I get an error like above on my terminal. AddRemove is an example component of component-1

[tleunen]

Is this error specific to the usage with eslint, or even the babel compilation fails?
If even babel fails, you can compile the file and see the output code generated

[kkomaz]

via import (from Email Component)
import AddRemove from 'src/display/AddRemove';

via after build/dist: (from Email Component)
var _AddRemove = require('../../display/AddRemove');

I am going to show the original tree of my project. The example above was for a simple use case.
Seems like the build is working fine.

- __tests__
- src
  - display
    - AddRemove
       * index.jsx
       * package.json (sets the main file to index.jsx)
  - forms
    - EmailComponent
       * index.jsx
       * package.json (sets the main file to index.jsx) 
- .babelrc

[kkomaz]

@tleunen

Seems like the issue was related to eslint. I disabled the rules on the src file directory and confirmed it was working. I will have to figure out why the linter is yelling only my src directories. Thanks for the help

[tleunen]

Are you using this? https://github.com/tleunen/eslint-import-resolver-babel-module :)
If so, please create a ticket there so it's easier for me to track. And if you can create a small test project to reproduce the issue, it will also help.

[cpsubrian]

For those who land here via google/search, I was having a similar issue where Jest was not finding some of my aliased files (but babel-cli was compiling just fine). I just needed to clear Jest's cache with --no-cache.