Skip to content

Instantly share code, notes, and snippets.

@nerdyman
Last active June 7, 2024 17:16
Show Gist options
  • Save nerdyman/2f97b24ab826623bff9202750013f99e to your computer and use it in GitHub Desktop.
Save nerdyman/2f97b24ab826623bff9202750013f99e to your computer and use it in GitHub Desktop.
Convert TypeScript tsconfig paths to webpack alias paths
const { resolve } = require('path');
/**
* Resolve tsconfig.json paths to Webpack aliases
* @param {string} tsconfigPath - Path to tsconfig
* @param {string} webpackConfigBasePath - Path from tsconfig to Webpack config to create absolute aliases
* @return {object} - Webpack alias config
*/
function resolveTsconfigPathsToAlias({
tsconfigPath = './tsconfig.json',
webpackConfigBasePath = __dirname,
} = {}) {
const { paths } = require(tsconfigPath).compilerOptions;
const aliases = {};
Object.keys(paths).forEach((item) => {
const key = item.replace('/*', '');
const value = resolve(webpackConfigBasePath, paths[item][0].replace('/*', '').replace('*', ''));
aliases[key] = value;
});
return aliases;
}
module.exports = resolveTsconfigPathsToAlias;
{
"compilerOptions": {
"module": "commonjs",
"moduleResolution": "node",
"outDir": "./dist",
"allowJs": true,
"target": "es6",
"jsx": "react",
"sourceMap": true,
"noImplicitAny": true,
"strictNullChecks": true,
"baseUrl": "./",
"lib": [
"DOM",
"ES5",
"ES6",
"es2017.object"
],
"paths": {
"Root/*": ["src/*"],
"Components/*": ["src/components/*"],
"Data/*": ["src/data/*"],
}
},
import Banner from 'Components/banner';
// add paths to webpack
const resolveTsconfigPathsToAlias = require('./resolve-tsconfig-path-to-webpack-alias');
module.exports = {
// ...
resolve: {
// ...
alias: resolveTsconfigPathsToAlias({
tsconfigPath: '../tsconfig.json', // Using custom path
webpackConfigBasePath: '../', // Using custom path
}),
}
}
@jraoult
Copy link

jraoult commented Apr 29, 2020

Not sure you folks are aware of this https://www.npmjs.com/package/tsconfig-paths-webpack-plugin. May be it can help someone in the future.

@cdpark0530
Copy link

cdpark0530 commented Dec 31, 2020

At lease tsconfig-paths-webpack-plugin doesn't work with webpack:^5:11.1 as it seems now.
I really appreciate this @nerdyman

@MisaGu
Copy link

MisaGu commented Feb 9, 2021

Not sure you folks are aware of this https://www.npmjs.com/package/tsconfig-paths-webpack-plugin. May be it can help someone in the future.

this plugins replaces the context of resolve.alias object so u will not be able to add any custom aliases to your webpack configuration, and will be left in hands with only the one mentioned in tsconfig - what is kinda .... complicated )

@hansoksendahl
Copy link

@MisaGu Have you heard of the spread operator?

// add paths to webpack

const resolveTsconfigPathsToAlias = require('./resolve-tsconfig-path-to-webpack-alias');

module.exports = {
  // ...
  resolve: {
    // ...
    alias: {
      ...resolveTsconfigPathsToAlias({
	    tsconfigPath: '../tsconfig.json', // Using custom path
	    webpackConfigBasePath: '../', // Using custom path
      }),
      Utilities: path.resolve(__dirname, 'src/utilities/'),
      Templates: path.resolve(__dirname, 'src/templates/'),
    }
  }
}

@hansoksendahl
Copy link

hansoksendahl commented May 12, 2022

@nerdyman It seems to me that this gist is missing the baseUrl. I had to edit to this to get it working.

const { resolve } = require('path');

/**
 * Resolve tsconfig.json paths to Webpack aliases
 * @param  {string} tsconfigPath           - Path to tsconfig
 * @param  {string} webpackConfigBasePath  - Path from tsconfig to Webpack config to create absolute aliases
 * @return {object}                        - Webpack alias config
 */
function resolveTsconfigPathsToAlias({
  tsconfigPath = './tsconfig.json',
  webpackConfigBasePath = __dirname,
} = {}) {
  const { paths, baseUrl } = require(tsconfigPath).compilerOptions;

  const aliases = {};

  Object.keys(paths).forEach((item) => {
    const key = item.replace('/*', '');
    const value = resolve(webpackConfigBasePath, baseUrl, paths[item][0].replace('/*', '').replace('*', ''));

    aliases[key] = value;
  });

  return aliases;
}

module.exports = resolveTsconfigPathsToAlias;

@its-dibo
Copy link

there is an issue in this configuration, because the first matched alias is selected instead of the most specific one

@christophediprima
Copy link

@its-dibo moved more specific first in the tsconfig paths as a workaround...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment