Detecting server imports on the client

waspc/data/Generator/templates/react-app/tsconfig.json

@@ -2,6 +2,6 @@
   "files": [],
   "references": [
     { "path": "./tsconfig.app.json" },
-    { "path": "./tsconfig.node.json" },
+    { "path": "./tsconfig.vite.json" },
   ]
 }

waspc/data/Generator/templates/react-app/tsconfig.vite.json

@@ -0,0 +1,16 @@
+{{={= =}=}}
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+  },
+  "include": [
+    {=# includePaths =}
+    "{= . =}",
+    {=/ includePaths =}
+  ]
+}

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

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

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

@@ -0,0 +1,55 @@
+{{={= =}=}}
+import { type Plugin } from 'vite'
+import path from 'path'
+
+const waspProjectDirAbsPath = getWaspProjectDirAbsPathFromCwd()
+
+export function detectServerImports(): Plugin {
+  return {
+    name: 'wasp-detect-server-imports',
+    enforce: 'pre',
+    resolveId(source, importer) {
+      if (!importer) {
+        return
+      }
+
+      const pathToUserCode = parsePathToUserCode(importer)
+      if (!pathToUserCode) {
+        return
+      }
+
+      if (isServerImport(source)) {
+        throw new Error(
+          `Server code cannot be imported in the client code. Import from "${source}" in "${pathToUserCode}" is not allowed.`
+        )
+      }
+    },
+  }
+}
+
+function isServerImport(moduleName: string): boolean {
+  return moduleName.startsWith('wasp/server')
+}
+
+type RelativePathToUserCode = string & { _brand: 'relativePathToUserCode' }
+
+function parsePathToUserCode(
+  importerPath: string
+): RelativePathToUserCode | null {
+  const importerPathRelativeToWaspProjectDir = path.relative(
+    waspProjectDirAbsPath,
+    importerPath
+  )
+  return importerPathRelativeToWaspProjectDir.startsWith('src/')
+    ? (importerPathRelativeToWaspProjectDir as RelativePathToUserCode)
+    : null
+}
+
+// We can't pass the "waspProjectDir" path from Haskell because we need the absolute path:
+// e.g. /Users/{username}/dev/wasp/waspc/examples/todoApp
+// which contains machine specific info like the username which is different in the CI and locally.
+// This breaks our e2e tests in the CI because the path is different.
+function getWaspProjectDirAbsPathFromCwd(): string {
+  const webAppDirAbsPath = process.cwd()
+  return path.join(webAppDirAbsPath, '{= waspProjectDirFromWebAppDir =}')
+}