{"id":10668,"library":"convert-tsconfig-paths-to-webpack-aliases","title":"TypeScript Paths to Webpack Aliases Converter","description":"The `convert-tsconfig-paths-to-webpack-aliases` package offers a focused utility to bridge the gap between TypeScript's `compilerOptions.paths` and Webpack's `resolve.alias` configuration. It transforms the globstar notation used in `tsconfig.json` into a format compatible with Webpack, thereby establishing a single source of truth for module aliases and preventing discrepancies between TypeScript's type resolution and Webpack's bundling process. This ensures that developers define their module aliases only once in `tsconfig.json`, and this utility automatically synchronizes them with the Webpack build. The current stable version is 0.9.2, indicating it's pre-1.0 but widely functional, and it typically sees stable, moderate release cycles fitting a niche utility.","status":"active","version":"0.9.2","language":"javascript","source_language":"en","source_url":"https://github.com/marzelin/convert-tsconfig-paths-to-webpack-aliases","tags":["javascript"],"install":[{"cmd":"npm install convert-tsconfig-paths-to-webpack-aliases","lang":"bash","label":"npm"},{"cmd":"yarn add convert-tsconfig-paths-to-webpack-aliases","lang":"bash","label":"yarn"},{"cmd":"pnpm add convert-tsconfig-paths-to-webpack-aliases","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"The package exports a default function. Use default import for ESM.","wrong":"import { convertPathsToAliases } from 'convert-tsconfig-paths-to-webpack-aliases';","symbol":"convertPathsToAliases","correct":"import convertPathsToAliases from 'convert-tsconfig-paths-to-webpack-aliases';"},{"note":"For CommonJS, access the default export via the '.default' property.","wrong":"const convertPathsToAliases = require('convert-tsconfig-paths-to-webpack-aliases');","symbol":"convertPathsToAliases","correct":"const convertPathsToAliases = require('convert-tsconfig-paths-to-webpack-aliases').default;"}],"quickstart":{"code":"// webpack.config.js\nconst path = require('path');\nconst fs = require('fs');\nconst stripJsonComments = require('strip-json-comments'); // You might need to install 'strip-json-comments'\n\nconst convertPathsToAliases = require('convert-tsconfig-paths-to-webpack-aliases').default;\n\n// Load tsconfig.json and remove comments\nconst tsconfigPath = path.resolve(__dirname, 'tsconfig.json');\nconst tsconfigContent = fs.readFileSync(tsconfigPath, 'utf8');\nconst tsconfig = JSON.parse(stripJsonComments(tsconfigContent));\n\nconst aliases = convertPathsToAliases(tsconfig);\n\nmodule.exports = {\n  mode: 'development',\n  entry: './src/index.ts',\n  output: {\n    filename: 'bundle.js',\n    path: path.resolve(__dirname, 'dist'),\n  },\n  resolve: {\n    extensions: ['.ts', '.js'],\n    alias: aliases,\n  },\n  module: {\n    rules: [\n      {\n        test: /\\.ts$/,\n        use: 'ts-loader',\n        exclude: /node_modules/,\n      },\n    ],\n  },\n};\n\n// tsconfig.json (example - ensure no comments if you require directly without stripJsonComments)\n/*\n{\n  \"compilerOptions\": {\n    \"baseUrl\": \".\",\n    \"paths\": {\n      \"@components/*\": [\"src/components/*\"],\n      \"@utils/*\": [\"src/utils/*\"]\n    }\n  }\n}\n*/","lang":"typescript","description":"Demonstrates integrating the utility into a webpack.config.js to synchronize TypeScript paths with Webpack aliases, including handling comments in tsconfig.json."},"warnings":[{"fix":"Use a utility like `strip-json-comments` to preprocess `tsconfig.json` content before passing it to `convertPathsToAliases`. For example: `JSON.parse(stripJsonComments(fs.readFileSync('./tsconfig.json', 'utf8')))`.","message":"The utility expects a valid JSON object for `tsconfig.json`. Directly requiring `tsconfig.json` with comments will result in a parsing error.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Ensure `compilerOptions.baseUrl` is correctly configured in your `tsconfig.json`, typically set to `.` for the project root.","message":"For TypeScript `paths` to function correctly, `compilerOptions.baseUrl` must be defined in `tsconfig.json`. If `baseUrl` is missing or incorrect, aliases generated by this utility might not resolve as expected in Webpack.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Consult the package's GitHub releases or changelog before upgrading to understand any API changes or required adjustments in your `webpack.config.js`.","message":"As a pre-1.0.0 package, the API might introduce breaking changes in minor versions (e.g., from 0.x.x to 0.y.x). Always review release notes when upgrading to new minor versions.","severity":"breaking","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure the path to `tsconfig.json` is correct. If comments are present, read the file content as a string, strip comments (e.g., using `strip-json-comments`), and then parse it with `JSON.parse` before passing to the utility.","cause":"Attempting to `require()` a `tsconfig.json` file that contains comments, or the file path is incorrect.","error":"Error: Cannot find module './tsconfig.json' or SyntaxError: Unexpected token / in JSON at position X"},{"fix":"For CommonJS, use `const convertPathsToAliases = require('convert-tsconfig-paths-to-webpack-aliases').default;`. For ES Modules, use `import convertPathsToAliases from 'convert-tsconfig-paths-to-webpack-aliases';`.","cause":"Incorrect import syntax for the default export, particularly when mixing CommonJS and ES Modules.","error":"TypeError: convertPathsToAliases is not a function"},{"fix":"Verify that `tsconfig.json` has `compilerOptions.baseUrl` correctly set. Ensure there are no comments in the `tsconfig.json` being passed to the utility. Double-check that `compilerOptions.paths` entries correctly map to existing directories and files.","cause":"Webpack is unable to resolve an alias generated by the utility, often due to an incorrect `baseUrl`, malformed `paths` in `tsconfig.json`, or an unparsed `tsconfig.json` with comments.","error":"Module not found: Error: Can't resolve '@components/MyComponent' in '...'"}],"ecosystem":"npm"}