Detecting server imports on the client

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

@@ -6,5 +6,5 @@
     "moduleResolution": "bundler",
     "allowSyntheticDefaultImports": true
   },
-  "include": ["vite.config.ts", "./src/ext-src/vite.config.ts"]
+  "include": ["vite.config.ts", "./src/ext-src/vite.config.ts", "./vite/detectServerImports.ts"]
 }

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.
@@ -16,7 +17,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,54 @@
+import { type Plugin } from "vite";
+
+export function detectServerImports(): Plugin {
+  return {
+    name: 'wasp-detect-server-imports',
+    transform(code, filePath) {
+      const isInDotWaspFolder = filePath.includes("/.wasp/");
+
+      // We don't want to check for server imports in the Wasp 
+      // framework code.
+      if (isInDotWaspFolder) {
+        return;
+      }
+
+      const imports = getImportsFromCode(code);
+
+      for (const imp of imports) {
+        if (imp.moduleName.startsWith("wasp/server")) {
+          throw new Error(getServerImportErrorMessage(imp, filePath));
+        }
+      }
+    },
+  };
+}
+
+type Import = {
+  importStatement: string;
+  moduleName: string;
+}
+
+const importStatementRegex = /\s*import\s+(?:(?:[\w*\s{},]*)\s+from\s+)?(['"`])([^'"`]+)\1\s*/g;
+
+function* getImportsFromCode(code: string): Generator<Import> {
+  const matches = code.matchAll(importStatementRegex);
+  for (const match of matches) {
+    yield {
+      importStatement: match[0].trim(),
+      moduleName: match[2],
+    };
+  }
+}
+
+function getServerImportErrorMessage(imp: Import, filePath: string): string {
+  return  `Client module ${getRelativeFilePath(filePath)} imports server specific module ${imp.moduleName}:
+
+${imp.importStatement}
+
+This is not allowed in the client code.`
+}
+
+// TODO: implement this with Wasp project dir passed to template.
+function getRelativeFilePath(filePath: string): string {
+  return filePath;
+}

waspc/examples/todoApp/src/pages/About.jsx

@@ -1,5 +1,7 @@
 import { Link } from "wasp/client/router";
 
+import { HttpError } from "wasp/server"
+
 import React from 'react'
 
 const About = () => {

waspc/src/Wasp/Generator/WebAppGenerator.hs

@@ -67,6 +67,7 @@ genWebApp spec = do
       genFileCopy [relfile|tsconfig.json|],
       genFileCopy [relfile|tsconfig.node.json|],
       genFileCopy [relfile|netlify.toml|],
+      genFileCopy [relfile|vite/detectServerImports.ts|],
       genPackageJson spec (npmDepsForWasp spec),
       genNpmrc,
       genGitignore,