Make path aliases fully work but its ugly

waspc/data/Generator/templates/react-app/src/index.tsx

@@ -17,6 +17,11 @@ import {
 import { WebSocketProvider } from 'wasp/client/webSocket/WebSocketProvider'
 {=/ areWebSocketsUsed =}
 
+
+const anyFn = (x) => x + x // implicit any, must error
+anyFn(1)
+const x = "Jako dobar" // unused local, must error
+
 startApp()
 
 async function startApp() {

waspc/data/Generator/templates/react-app/vite.config.ts

@@ -3,6 +3,9 @@
 import { mergeConfig } from "vite";
 import react from "@vitejs/plugin-react";
 import { defaultExclude } from "vitest/config"
+import { resolveProjectPath } from "wasp/dev"
+import tsconfigPaths from 'vite-tsconfig-paths'
+
 
 {=# customViteConfig.isDefined =}
 // Ignoring the TS error because we are importing a file outside of TS root dir.
@@ -16,7 +19,12 @@ const _waspUserProvidedConfig = {};
 
 const defaultViteConfig = {
   base: "{= baseDir =}",
-  plugins: [react()],
+  plugins: [
+    tsconfigPaths({
+      projects: ["./", resolveProjectPath("./")]
+    }),
+    react()
+  ],
   optimizeDeps: {
     exclude: ['wasp']
   },

waspc/data/Generator/templates/sdk/wasp/dev/index.ts

@@ -12,6 +12,7 @@ import { join as joinPaths } from 'path'
  * .wasp/out/web-app directory. This function resolves a project root dir path
  * to be relative to the `web-app` directory i.e. `../../../projectDirPath`.
  */
+// TODO: The relative path should come from Haskell
 export function resolveProjectPath(path: string): string {
   return joinPaths('../../../', path)
 }

waspc/data/Generator/templates/server/rollup.config.js

@@ -1,12 +1,28 @@
 {{={= =}=}}
 import esbuild from 'rollup-plugin-esbuild'
+import alias from '@rollup/plugin-alias';
+import path from 'path'
+import resolve from '@rollup/plugin-node-resolve';
 
 export default [
   createBundle('src/server.ts', 'bundle/server.js'),
   {=# areDbSeedsDefined =}
   createBundle('src/dbSeed.ts', 'bundle/dbSeed.js'),
   {=/ areDbSeedsDefined =}
 ]
+// Utility function to read and parse tsconfig.json
+function getAliasEntries() {
+  const paths = {
+    {=# paths =}
+      "{= key =}": [{=# value =}"{= . =}"{=/ value =}],
+    {=/ paths =}
+  }
+  const baseUrl = "{= baseUrl =}"
+  return Object.entries(paths).map(([alias, [relativePath]]) => ({
+    find: alias.replace('/*', ''),
+    replacement: path.join("../", baseUrl, relativePath.replace('/*', '')),
+  }));
+}
 
 function createBundle(inputFilePath, outputFilePath) {
   return {
@@ -17,12 +33,52 @@ function createBundle(inputFilePath, outputFilePath) {
       sourcemap: true,
     },
     plugins: [
+      resolve(),
+      alias({
+        entries: getAliasEntries(),
+      }),
       esbuild({
         target: 'esnext',
       }),
     ],
     // We don't want to bundle any of the node_module deps
     // as we want to keep them as external dependencies
-    external: (id) => !/^[./]/.test(id),
+    external: /node_modules/,
+  }
+}
+
+/*
+import esbuild from 'rollup-plugin-esbuild'
+import alias from '@rollup/plugin-alias';
+import resolve from '@rollup/plugin-node-resolve';
+
+export default [
+  createBundle('src/server.ts', 'bundle/server.js'),
+  createBundle('src/dbSeed.ts', 'bundle/dbSeed.js'),
+]
+
+function createBundle(inputFilePath, outputFilePath) {
+  return {
+    input: inputFilePath,
+    output: {
+      file: outputFilePath,
+      format: 'es',
+      sourcemap: true,
+    },
+    plugins: [
+      resolve(),
+      alias({
+        entries: [
+          { find: '@util', replacement: './util.js' },
+        ]
+      }),
+      esbuild(),
+    ],
+
+    // // We don't want to bundle any of the node_module deps
+    // // as we want to keep them as external dependencies
+    // external: (id) => !/^[./]/.test(id),
+    external: /node_modules/,
   }
 }
+*/

waspc/src/Wasp/Generator/ServerGenerator.hs

@@ -13,10 +13,12 @@ where
 import Data.Aeson (object, (.=))
 import qualified Data.Aeson as Aeson
 import qualified Data.ByteString.Lazy.UTF8 as ByteStringLazyUTF8
+import qualified Data.Map as M
 import Data.Maybe
   ( isJust,
     maybeToList,
   )
+import qualified Data.Text as T
 import StrongPath
   ( Dir,
     File',
@@ -36,6 +38,7 @@ import qualified Wasp.AppSpec.App.Server as AS.App.Server
 import Wasp.AppSpec.Util (isPgBossJobExecutorUsed)
 import Wasp.AppSpec.Valid (getApp, getLowestNodeVersionUserAllows, isAuthEnabled)
 import Wasp.Env (envVarsToDotEnvContent)
+import qualified Wasp.ExternalConfig.TsConfig as TC
 import Wasp.Generator.Common
   ( ServerRootDir,
     superjsonVersion,
@@ -167,7 +170,9 @@ npmDepsForWasp spec =
             ("@tsconfig/node" <> majorNodeVersionStr, "latest"),
             ("@types/cors", "^2.8.5"),
             ("rollup", "^4.9.6"),
-            ("rollup-plugin-esbuild", "^6.1.1")
+            ("rollup-plugin-esbuild", "^6.1.1"),
+            ("@rollup/plugin-node-resolve", "^16.0.0"),
+            ("@rollup/plugin-alias", "^5.1.1")
           ]
     }
   where
@@ -297,6 +302,13 @@ genRollupConfigJs spec =
   return $
     C.mkTmplFdWithData [relfile|rollup.config.js|] (Just tmplData)
   where
-    tmplData = object ["areDbSeedsDefined" .= areDbSeedsDefined]
+    tmplData = object ["areDbSeedsDefined" .= areDbSeedsDefined, "baseUrl" .= baseUrl, "paths" .= paths]
 
     areDbSeedsDefined = maybe False (not . null) $ getDbSeeds spec
+    baseUrl = TC.baseUrl $ TC.compilerOptions $ AS.tsConfig spec
+    paths =
+      fmap (map pathEntryToObject . M.toList)
+        . TC.paths
+        . TC.compilerOptions
+        $ AS.tsConfig spec
+    pathEntryToObject (key, value) = object ["key" .= T.pack key, "value" .= value]

waspc/src/Wasp/Generator/WebAppGenerator.hs

@@ -139,6 +139,7 @@ npmDepsForWasp _spec =
             ("@types/react", "^18.0.37"),
             ("@types/react-dom", "^18.0.11"),
             ("@vitejs/plugin-react", "^4.2.1"),
+            ("vite-tsconfig-paths", "^5.1.4"),
             -- NOTE: used in the validate-env.mjs script
             ("dotenv", "^16.0.3"),
             -- NOTE: Make sure to bump the version of the tsconfig