babel-plugin-module-resolver adding extra ../ to path

Question

While I am aware that Babel is capable of transpiling TypeScript itself, I've had enough weird issues I'd like to first transpile TypeScript->JS and then run Babel on that.

I've got my tsconfig.json files working as expected. When I compile my TypeScript (from ./src folder relative to babel.config.json's path), it outputs to a ./build folder. I have Babel set to take what's in the ./build folder and output to the ./dist folder.

The output of TSC shows import {bar} from 'foo' and import {thing} from 'foo/util' , as expected. But Babel's output looks like ../../../libfoo/libfoo.js when it should be ../../libfoo/libfoo.js

No matter what I try with root/cwd, I can't seem to get that extra ../ to disappear. I've managed to make it go away a couple times, but then I rebuild without changing the babel config, and it comes back.

My babel.config.json currently looks like this:

{
    "presets": [
        ["@babel/preset-env", {"targets": {
            "node": true,
            "electron": "80"
        }}],
        ["@babel/preset-typescript", { "onlyRemoveTypeImports": true }]
    ],
    "plugins": [
        ["babel-plugin-module-resolver", {
            "alias": {
                "^foo/(.+)": "./libfoo/\\1.js",
                "^foo$": "./libfoo/libfoo.js"
            }
        }],
        ["@babel/plugin-transform-modules-umd"],
        ["@babel/plugin-transform-typescript", {
            "allowNamespaces": true,
            "allowDeclareFields": true,
            "onlyRemoveTypeImports": true
        }],
        ["@babel/plugin-proposal-pipeline-operator", { "proposal": "fsharp" }],
        "@babel/plugin-proposal-nullish-coalescing-operator",
        "@babel/plugin-proposal-optional-chaining",
        "@babel/plugin-proposal-do-expressions",
        "@babel/plugin-proposal-logical-assignment-operators",
        "@babel/plugin-proposal-partial-application",
        ["@babel/plugin-proposal-decorators", { "decoratorsBeforeExport": true }],
        "@babel/plugin-proposal-class-properties",
        "@babel/plugin-proposal-throw-expressions",
        "@babel/plugin-proposal-export-default-from",
        "@babel/plugin-proposal-export-namespace-from",
        "@babel/plugin-proposal-function-bind"
    ],
    "sourceMaps": true
}

Answer 1

Well, I found a solution that doesn't really fix the problem but makes it works.

My files structure is something like this:

|-dist
|-src
  |-db
     |-connect
        |-index.ts
  |-index.ts
|-.babelrc

When babel compiles the code, the import of db/connect in src/index.ts , go from this:

import ... from "db/connect"

to this:

var _connect = require("../db/connect");

To resolve this, I simply add /dist to the paths in .babelrc

before:

[
   "module-resolver",
      {
         "root": ["./"], # or ["src"] or "src" or ["./src"] or "./src" or any way you can imagine
         "alias": {
            "db": "./db",
         }
      }
   }
]

after:

[
   "module-resolver",
      {
         "alias": {
            "db": "./dist/db",
         }
      }
   }
]

And the import is now:

var _connect = require("../dist/db/connect");

As you said, the root doesn't affect the require path, so I just removed it.

This doesn't fix the problem, but makes it work.

Hope it helps, good luck: :)