nerdyman · June 19, 2025 19:38 · Oct 4, 2019 · Oct 3, 2019 · Sep 7, 2018 · Sep 7, 2018
diff --git a/resolve-tsconfig-path-to-webpack-alias.js b/resolve-tsconfig-path-to-webpack-alias.js
@@ -16,7 +16,7 @@ function resolveTsconfigPathsToAlias({
 
     Object.keys(paths).forEach((item) => {
         const key = item.replace('/*', '');
-        const value = resolve(webpackConfigBasePath, paths[item][0].replace('/*', ''));
+        const value = resolve(webpackConfigBasePath, paths[item][0].replace('/*', '').replace('*', ''));
 
         aliases[key] = value;
     });

diff --git a/resolve-tsconfig-path-to-webpack-alias.js b/resolve-tsconfig-path-to-webpack-alias.js
@@ -3,13 +3,13 @@ const { resolve } = require('path');
 /**
  * Resolve tsconfig.json paths to Webpack aliases
  * @param  {string} tsconfigPath           - Path to tsconfig
- * @param  {string} webpackConfigBasePath  - Relative base path from tsconfig to Webpack config to create absolute aliases
+ * @param  {string} webpackConfigBasePath  - Path from tsconfig to Webpack config to create absolute aliases
  * @return {object}                        - Webpack alias config
  */
 function resolveTsconfigPathsToAlias({
     tsconfigPath = './tsconfig.json',
-    webpackConfigBasePath = './'} = {},
-) {
+    webpackConfigBasePath = __dirname,
+} = {}) {
     const { paths } = require(tsconfigPath).compilerOptions;
 
     const aliases = {};

diff --git a/tsconfig.json b/tsconfig.json
@@ -17,6 +17,7 @@
             "es2017.object"
         ],
         "paths": {
+            "Root/*": ["src/*"],
             "Components/*": ["src/components/*"],
             "Data/*": ["src/data/*"],
         }

diff --git a/resolve-tsconfig-path-to-webpack-alias.js b/resolve-tsconfig-path-to-webpack-alias.js
@@ -4,7 +4,7 @@ const { resolve } = require('path');
  * Resolve tsconfig.json paths to Webpack aliases
  * @param  {string} tsconfigPath           - Path to tsconfig
  * @param  {string} webpackConfigBasePath  - Relative base path from tsconfig to Webpack config to create absolute aliases
- * @return {object}
+ * @return {object}                        - Webpack alias config
  */
 function resolveTsconfigPathsToAlias({
     tsconfigPath = './tsconfig.json',

diff --git a/resolve-tsconfig-path-to-webpack-alias.js b/resolve-tsconfig-path-to-webpack-alias.js
@@ -1,24 +1,27 @@
 const { resolve } = require('path');
 
 /**
- * resolveTsConfigPaths - resolve tsconfig paths to webpack aliases
+ * Resolve tsconfig.json paths to Webpack aliases
+ * @param  {string} tsconfigPath           - Path to tsconfig
+ * @param  {string} webpackConfigBasePath  - Relative base path from tsconfig to Webpack config to create absolute aliases
  * @return {object}
  */
-function resolveTsconfigPathsToAlias() {
-    // @NOTE you may need to change this path depending on your project set up
-    const { paths } = require('../tsconfig.json').compilerOptions;
+function resolveTsconfigPathsToAlias({
+    tsconfigPath = './tsconfig.json',
+    webpackConfigBasePath = './'} = {},
+) {
+    const { paths } = require(tsconfigPath).compilerOptions;
 
     const aliases = {};
 
     Object.keys(paths).forEach((item) => {
         const key = item.replace('/*', '');
-        // @NOTE you might need to change './' depending on your project set up
-        const value = resolve('./', paths[item][0].replace('/*', ''));
+        const value = resolve(webpackConfigBasePath, paths[item][0].replace('/*', ''));
 
         aliases[key] = value;
     });
 
     return aliases;
 }
 
-module.exports = resolveTsconfigPathsToAlias;
+module.exports = resolveTsconfigPathsToAlias;
diff --git a/Tsconfig paths to webpack alias → tsconfig.json b/Tsconfig paths to webpack alias → tsconfig.json
@@ -1,5 +1,4 @@
 {
-    ...
     "compilerOptions": {
         "module": "commonjs",
         "moduleResolution": "node",

diff --git a/webpack.config.js b/webpack.config.js
@@ -1,9 +1,14 @@
 // add paths to webpack
 
+const resolveTsconfigPathsToAlias = require('./resolve-tsconfig-path-to-webpack-alias');
+
 module.exports = {
-  ...
+  // ...
   resolve: {
-    ...
-    alias: resolveTsconfigPathsToAlias(),
+    // ...
+    alias: resolveTsconfigPathsToAlias({
+	    tsconfigPath: '../tsconfig.json', // Using custom path
+	    webpackConfigBasePath: '../', // Using custom path
+    }),
   }
 }
diff --git a/resolve-tsconfig-path-to-webpack-alias.js b/resolve-tsconfig-path-to-webpack-alias.js
@@ -19,4 +19,6 @@ function resolveTsconfigPathsToAlias() {
     });
 
     return aliases;
-}
+}
+
+module.exports = resolveTsconfigPathsToAlias;
diff --git a/Example ts config → Tsconfig paths to webpack alias b/Example ts config → Tsconfig paths to webpack alias
diff --git a/resolve-tsconfig-path-to-webpack-alias.js b/resolve-tsconfig-path-to-webpack-alias.js
@@ -1,4 +1,4 @@
-import { resolve } from 'path';
+const { resolve } = require('path');
 
 /**
  * resolveTsConfigPaths - resolve tsconfig paths to webpack aliases

diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,9 @@
+// add paths to webpack
+
+module.exports = {
+  ...
+  resolve: {
+    ...
+    alias: resolveTsconfigPathsToAlias(),
+  }
+}
diff --git a/resolve-tsconfig-path-to-webpack.js → resolve-tsconfig-path-to-webpack-alias.js b/resolve-tsconfig-path-to-webpack.js → resolve-tsconfig-path-to-webpack-alias.js
diff --git a/resolveTsConfigPaths.js → resolve-tsconfig-path-to-webpack.js b/resolveTsConfigPaths.js → resolve-tsconfig-path-to-webpack.js
@@ -1,15 +1,19 @@
+import { resolve } from 'path';
+
 /**
  * resolveTsConfigPaths - resolve tsconfig paths to webpack aliases
  * @return {object}
  */
 function resolveTsconfigPathsToAlias() {
+    // @NOTE you may need to change this path depending on your project set up
     const { paths } = require('../tsconfig.json').compilerOptions;
 
     const aliases = {};
 
     Object.keys(paths).forEach((item) => {
         const key = item.replace('/*', '');
-        const value = path.resolve('./', paths[item][0].replace('/*', ''));
+        // @NOTE you might need to change './' depending on your project set up
+        const value = resolve('./', paths[item][0].replace('/*', ''));
 
         aliases[key] = value;
     });

diff --git a/Example ts config b/Example ts config
@@ -0,0 +1,24 @@
+{
+    ...
+    "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": {
+            "Components/*": ["src/components/*"],
+            "Data/*": ["src/data/*"],
+        }
+    },
diff --git a/resolveTsConfigPaths.js b/resolveTsConfigPaths.js
@@ -0,0 +1,18 @@
+/**
+ * resolveTsConfigPaths - resolve tsconfig paths to webpack aliases
+ * @return {object}
+ */
+function resolveTsconfigPathsToAlias() {
+    const { paths } = require('../tsconfig.json').compilerOptions;
+
+    const aliases = {};
+
+    Object.keys(paths).forEach((item) => {
+        const key = item.replace('/*', '');
+        const value = path.resolve('./', paths[item][0].replace('/*', ''));
+
+        aliases[key] = value;
+    });
+
+    return aliases;
+}
diff --git a/usage.tsx b/usage.tsx
@@ -0,0 +1 @@
+import Banner from 'Components/banner';
No results found