Make Wasp work with tsconfig path aliases

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/sdk/wasp/package.json

@@ -45,7 +45,7 @@
       {=!  expose it here (which leaks it to our users). We could avoid this by =}
       {=!  using relative imports inside SDK code (instead of library imports), =}
       {=!  but I didn't have time to implement it. =}
-      "./ext-src/*": "./dist/ext-src/*.js",
+      "./src/*": "./dist/src/*.js",
       {=!  Used by our code, uncodumented (but accessible) for users. =}
       "./operations/*": "./dist/operations/*",
       {=!  Used by our code, uncodumented (but accessible) for users. =}

waspc/data/Generator/templates/sdk/wasp/tsconfig.json

@@ -43,12 +43,11 @@
     // While this is great, we still want to dig deeper at some point to understand
     // better why Vite HMR misbehaves when the SDK is recompiled: https://github.com/wasp-lang/wasp/issues/1934 
     "incremental": true,
-    // todo(filip): Only works with common js, see https://www.typescriptlang.org/tsconfig#paths and daily-article.
-    // "paths": {
-    //   "@wasp/*": [
-    //     "./*.js"
-    //   ]
-    // }
+    "paths": {
+      {=# paths =}
+        "{= path =}": ["{= lookupLocation =}"],
+      {=/ paths =}
+    }
   },
   "include": [
     "."

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

@@ -1,5 +1,7 @@
 {{={= =}=}}
 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'),
@@ -17,12 +19,20 @@ function createBundle(inputFilePath, outputFilePath) {
       sourcemap: true,
     },
     plugins: [
+      resolve(),
+      alias({
+        entries: [
+          {=# aliases =}
+          { find: '{= find =}', replacement: '{= replacement =}' },
+          {=/ aliases =}
+        ]
+      }),
       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/,
   }
 }