Aliases being transformed in an unpredictable way

[kylegoetz]

I have a project with this structure

root
  src
    index.ts
    config.ts
tsconfig.json
.babelrc

I'm using tsconfig paths so that in my code from any subdirectory I can use @backend/foobar instead of ../../(.....)/foobar,

"baseUrl" "src",
"paths": {
	  "@backend/*": ["./*"],

My babelrc has

"plugins": [
		[
			"module-resolver",
			{
				"root": ["./intermediate"],
				"alias": {
					"@backend": "./backend/src",

I use tsc to type check and transpire to JS, then babel to transform the custom aliases. Or, am trying to.

Say I have in my src directory index.ts and config.ts

index.ts:

import { foo } from './config'

tsc transpiles and outputs to {root}/intermediate/. There, I have

index.js:

const config_1 = require("@backend/config");

Exactly as expected.

Now I'm trying to have babel take the contents of intermediate and correct the aliases and output to build:

build/.../index.js

var config_1 = require("../../../backend/src/config");

I cannot for the life of me figure out how my baberc is instructing babel-plugin-module-resolver to transform require('@backend/config') to require('../../../backend/src/config')!

tsc gives me the following structure

ROOT
  intermediate
    backend
      src
        index.js

and babel results in

ROOT
  build
    backend
      src
        index.js

Resulting overall structure is

ROOT (pathname is backend)
  src
    index.ts
  intermediate
    backend
      src
        index.js
  build
    backend
      src
        index.js

meaning build's index.js is trying to import essentially ROOT/backend/backend/src/config which is not correct. I want to to import (relative to index.js) ./config by replacing @becp/config with ./config.

The "good example" linked in the README doesn't help: it uses aliases, but it uses aliases that are imported from aliases.js, which does not exist in the repository, so I can't read how the aliases are actually defined!