config/webpack.common.config.js

@@ -1,3 +1,4 @@
+const fs = require('fs');
 const path = require('path');
 const RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts');
 const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
@@ -12,6 +13,14 @@ const {
 const paragonThemeCss = getParagonThemeCss(process.cwd());
 const brandThemeCss = getParagonThemeCss(process.cwd(), { isBrandOverride: true });
 
+const tsconfigPath = path.resolve(process.cwd(), 'tsconfig.json');
+const resolvePlugins = [];
+
+// Conditionally add TsconfigPathsPlugin if tsconfig.json exists
+if (fs.existsSync(tsconfigPath)) {
+  resolvePlugins.push(new TsconfigPathsPlugin({ configFile: tsconfigPath }));
+}
+
 module.exports = {
   entry: {
     app: path.resolve(process.cwd(), './src/index'),
@@ -46,9 +55,7 @@ module.exports = {
       'env.config': false,
     },
     extensions: ['.js', '.jsx', '.ts', '.tsx'],
-    plugins: [
-      new TsconfigPathsPlugin(),
-    ],
+    plugins: resolvePlugins,
   },
   optimization: {
     splitChunks: {

example/src/index.tsx

@@ -1,6 +1,6 @@
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
-import App from '@/App';
+import App from '@src/App';
 
 // This line is to emulate what frontend-platform does when i18n initializes.
 // It's necessary because our stylesheet is generated with `[dir="ltr"]` as a prefix on all

example/tsconfig.json

@@ -4,7 +4,7 @@
     "rootDir": ".",
     "outDir": "dist",
     "paths": {
-      "@/*": ["./src/*"]
+      "@src/*": ["./src/*"]
     },
   },
   "include": [