Alias resolves to wrong alias when used inside aliased code

[Mythli]

The behavior I have observed is that when I use an alias inside of another alias one path backward is somehow skimmed in my folder structure.

The same works with webpack which I use on the client side.

Babelrc:

{
  "presets": ["es2015", "stage-0"],

  "plugins": [
    ["module-resolver",
      {
        "root": [
          "./src"
        ],
        "alias": {
          "mythil": "./build/lib/mythil.js/src",
          "libbehoerdenglueck": "./build/lib/libbehoerdenglueck/src"
        }
      }]
  ]
}

Folder structure:

lib
├── libbehoerdenglueck
│   ├── data
│   │   └── ...
│   └── src
│       ├── constants.js
│       ├── hamburg.js
│       └── visit.js
└── mythil.js
    ├── COMMANDS.md
    └── src
        ├── array.js
        ├── dom.js
        ├── md5obj.js
        ├── number.js
        ├── object.js
        ├── string.js
        ├── time.js
        ├── util.js
        └── validation.js

Files are compiled into the build directory using this command:
./node_modules/.bin/babel src -d build && ./node_modules/.bin/babel lib -d build/lib && node build/index.js

The build dir then looks like this:

build
├── NetAppointmentApi.js
├── dump-pouch.js
├── dump.js
├── index.js
├── lib
│   ├── libbehoerdenglueck
│   │   └── src
│   │       ├── constants.js
│   │       ├── hamburg.js
│   │       └── visit.js
│   └── mythil.js
│       └── src
│           ├── array.js
│           ├── dom.js
│           ├── md5obj.js
│           ├── number.js
│           ├── object.js
│           ├── string.js
│           ├── time.js
│           ├── util.js
│           └── validation.js

When running the command compiling with babel works fine. However running the code encounters a module resolve error:

Error: Cannot find module '../../../build/lib/mythil.js/src/time'
    at Function.Module._resolveFilename (module.js:438:15)
    at Function.Module._load (module.js:386:25)
    at Module.require (module.js:466:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/tobiasanhalt/Development/behoerdenglueck/build/lib/libbehoerdenglueck/src/constants.js:20:13)
    at Module._compile (module.js:541:32)
    at Object.Module._extensions..js (module.js:550:10)
    at Module.load (module.js:456:32)
    at tryModuleLoad (module.js:415:12)
    at Function.Module._load (module.js:407:3)
    at Module.require (module.js:466:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/tobiasanhalt/Development/behoerdenglueck/build/lib/libbehoerdenglueck/src/visit.js:78:18)
    at Module._compile (module.js:541:32)
    at Object.Module._extensions..js (module.js:550:10)
    at Module.load (module.js:456:32)

In constants.js which is accessed through the alias libbehoerdenglueck the following line fails:
import { mToMs, sToMs, dToMs, hToMs } from 'mythil/time';

babel-plugin-module-resolver translates the alias mythil/time to ../../../build/lib/mythil.js/src/timeinstead of the correct ../../../../build/lib/mythil.js/src/time (one path backward is missing).

All that is pretty sad :(
Would love to see replications of the issue and possible workarounds.

Workaround:
find ./build -type f -name '*.js' -exec sed -i '' s@../../../build@../../../../build@ {} +

Best regards
Mythli

[tleunen]

Hi @Mythli, thank you for the great description.
So if I understand, you have your src directory with your code, and your lib directory with some other code. You're compiling them both in /build and /build/lib, but the paths are not correct.

Is your issue when building src, or lib?

Do you think it would be possible to setup a very small project reproducing the issue? It would help to find the root cause by reproducing it.

[Mythli]

Hi,
you understood correctly.

I will provide a testcase to resolve the issue.
I'm on a steep deadline right now so I'l have to do that later, I hope you can understand that.

[nicolas-goudry]

Hi,

I’ll add my contribution to this issue as I think it’s related to mine 😄

---

I’m working on a project which is kind of a starter-kit for all our future apps, so we splitted our original app in multiple modules, like this:

.
└── platform
    ├── utils
    ├── scripts
    ├── ui
    └── semantic (our custom Semantic UI build)

We do not want to make distributables for our modules, so we keep the code as is and rely on the .babelrc in each module to tell babel what it needs as plugins and related stuff to build it (which works perfectly).

We just switched to babel-plugin-module-resolver and encountered the same problem as @Mythli.

We have our utils relying on some of our scripts in its tests files and we have our scripts relying on some of our utils in its code files, like so:

.
└── utils
    ├── json
    │   ├── clean
    │   │   └── clean
    │   └── parse
    │       └── parse
    ├── string
    │   └── chars
    │       └── char-codes
    │           ├── index.spec.js
    │           └── index.js
    └── .babelrc

.
└── scripts
    ├── generate
    │   ├── test
    │   ├── src
    │   │   └── index.js
    │   └── index.js
    └── .babelrc

So we have a redundant dependency, which is handled by npm like a charm, but not by babel-plugin-module-resolver.

In fact, when we launch the tests from utils, it fails saying that it cannot find ../../json/clean. Of course, because the right path should be ../../../../json/clean!

Here is the directory tree of utils (simplified):

.
└── utils
    ├── string
    │   └── chars
    │       └── char-codes
    │           ├── index.spec.js
    │           └── index.js
    └── node_modules
        └── scripts
            └── generate
                ├── test
                ├── src
                │   └── index.js
                └── index.js

As you can see, babel-plugin-module-resolver is trying to resolve the json/clean file in the scripts folder of node_modules instead of the utils root folder.

If you have any question regarding my overcomplicated explanation, just ask 😄

EDIT: I forgot to add the .babelrc module-resolver config:
utils

{
  "ignore": "node_modules(?!\/aw-.+)",
  "plugins": [
    "transform-es2015-modules-commonjs",
    "transform-async-to-generator",
    "transform-class-properties",
    "transform-decorators-legacy",
    "transform-object-rest-spread",
    ["module-resolver", {
      "cwd": "babelrc",
      "root": ["./"],
      "alias": {
        "aw-utils": "./"
      }
    }]
  ]
}

scripts

{
  "ignore": "node_modules/(?!aw-.+)",
  "plugins": [
    "transform-es2015-modules-commonjs",
    "transform-class-properties",
    ["module-resolver", {
      "cwd": "babelrc",
      "root": ["./"],
      "alias": {
        "aw-scripts": "./"
      }
    }]
  ]
}

[tleunen]

Thank you @nicolas-goudry for the explanation, but it's really hard for me to understand what's going on with the plugin in this specific case without having any working example. Would you be able to setup a small project to reproduce the issue?

When you say you're running the tests from utils. Are you also running the tests located in your node_modules? Otherwise I don't see why the plugin would pick the babelrc file there.

Currently, the plugin tries to find the closed babelrc file as the "root" directory in order to compute the right path.

[tleunen]

@nicolas-goudry If you remove the custom cwd in the plugin, what happen?

[w3apps]

In my code I use something like: import storage from 'utils/storage'
And in the babelrc file I use:

alias": {
    "utils": "utils/lib"
}

However the transpiled path is: utils/lib/lib/storage
I have no idea why the 'lib' gets duplicated. Also I noticed this only happens when the exposed name is the same as the module nume. If I expose it as "utils2": "utils/lib" and import it as utils2/storage it works just fine.

[tleunen]

Also I noticed this only happens when the exposed name is the same as the module nume. If I expose it as "utils2": "utils/lib" and import it as utils2/storage it works just fine.

Interesting... I'll try to reproduce this particular issue

[nicolas-goudry]

@tleunen Sorry to reply so late!

Would you be able to setup a small project to reproduce the issue?

I don’t have access to the source code anymore because I left the company behind this project… So it would be hard to reproduce it for me.

When you say you're running the tests from utils. Are you also running the tests located in your node_modules? Otherwise I don't see why the plugin would pick the babelrc file there.

No, we were running tests with mocha only on ./ with an ignore pattern set to node_modules.

If you remove the custom cwd in the plugin, what happen?

I can’t tell you what would happen neither… Sorry 😕

[tleunen]

@Mythli - Do you still have the issue? Were you able to reproduce it outside of your repo?

Running this test works fine...

describe('#96', () => {
        const rootTransformerOpts = {
            babelrc: false,
            plugins: [
                [plugin, {
                    alias: {
                        mythil: './build/lib/mythil.js/src',
                    },
                }],
            ],
        };

        testRequireImport(
            'mythil/time',
            './build/lib/mythil.js/src/time',
            rootTransformerOpts,
        );
    });