gearnode / babel-plugin-tsconfig-paths-module-resolver

Use tsconfig-paths in any bundler that supports a custom babel config.

babel-plugin-tsconfig-paths-module-resolver

Combines babel-plugin-module-resolver and tsconfig-paths to make a babel plugin that resolves tsconfig paths.

Use tsconfig-paths in any bundler that supports a custom babel config.

This library is a re-export of babel-plugin-module-resolver pre-configured with tsconfig paths support via the package tsconfig-paths.

It aims to be stable by relying on these already widely-used packages to power the heavy logic:

dependency	weekly downloads
babel-plugin-module-resolver
tsconfig-paths

These dependencies are automatically updated via renovate bot and semantic release.

---

How is this different from babel-plugin-tsconfig-paths?

1. It does less — as stated above, this library depends on battled tested libs (tsconfig-paths and babel-plugin-module-resolver) to do the actual logic. The source code for this library is around ~100 SLOC which makes it easy to test and maintain.
2. It re-exports babel-plugin-module-resolver — giving you all the features of that babel plugin including custom resolve functions.

---

Installation

npm install --save-dev babel-plugin-tsconfig-paths-module-resolver

or

yarn add --dev babel-plugin-tsconfig-paths-module-resolver

Specify the plugin in your .babelrc (or equivalent configuration file).

{
  "presets": [
    // ...
    "@babel/preset-typescript",
    // ...
  ],
  "plugins": [
    // add this to your babel config file in `plugins`
    // 👇👇👇
    "tsconfig-paths-module-resolver"
    // 👆👆👆
    // ...
  ]
}

That's it! Paths from your tsconfig.json should now work!

Advanced usage

babel-plugin-tsconfig-paths-module-resolver accepts the same options as babel-plugin-module-resolver.

You can supply those extra options in your babel configuration file like so:

{
  "presets": [
    // ...
    "@babel/preset-typescript",
    // ...
  ],
  "plugins": [
    // ...
    [
      "tsconfig-paths-module-resolver",
      // add extra options here
      // 👇👇👇
      {
        // see here:
        // https://github.com/tleunen/babel-plugin-module-resolver/blob/master/DOCS.md
      }
      // 👆👆👆
    ]
  ]
};

resolvePath and createResolvePath

babel-plugin-module-resolver includes a configuration option to allow you to programmatically resolve your imports.

This plugin provides a resolvePath implementation powered by tsconfig-paths. If you'd like to implement your own resolvePath implementation while still utilizing this plugin's default implementation, you can separately import createResolvePath that returns a resolvePath implementation.

const createResolvePath = require('babel-plugin-tsconfig-paths-module-resolver/create-resolve-path');
const defaultResolvePath = createResolvePath();

/**
 * @param sourceFile {string} the input source path
 * @param currentFile {string} the absolute path of the current file
 * @param opts {any} the options as passed to the Babel config
 * @return {string}
 */
function customResolvePath(sourceFile, currentFile, opts) {
  // ...
  const result = defaultResolvePath(sourceFile, currentFile, opts);
  // ...

  return result;
}

// .babelrc.js
module.exports = {
  presets: [
    // ...
    '@babel/preset-typescript',
    // ...
  ],
  plugins: [
    // ...
    [
      'tsconfig-paths-module-resolver',
      {
        // 👇👇👇
        resolvePath: customResolvePath,
        // 👆👆👆
      },
    ],
  ],
};