Detecting server imports on the client #2442

infomiho · 2025-01-09T08:25:16Z

We want to detect imports from wasp/server/* in users' client code because we know it's incorrect. It's better to give users a nice error message than users receiving some (often hard to understand) runtime error message.

This is a draft initial implementation, I'll iterate on this a bit more.

Closes #2067

Signed-off-by: Mihovil Ilakovac <mihovil@ilakovac.com>

Martinsos · 2025-01-28T11:35:10Z

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

+  moduleName: string;
+}
+
+const importStatementRegex = /\s*import\s+(?:(?:[\w*\s{},]*)\s+from\s+)?(['"`])([^'"`]+)\1\s*/g;


I didn't dive deep, just wanted to check, since this is regex, is there a chance of false positives? If so, in which situations, and are we ok with that? If not, can we do it better?

Yes, could we maybe parse the import and do something with its AST (I'm not sure how powerful these plugins are, just throwing out ideas)?

Vite doesn't expose AST information to the plugins. One the popular plugins unplugin-ast uses the Babel parser under the hood to parse files into AST.

I didn't want to go down this route due to potential performance issues, but I have to admit that I haven't timed anything. I just assumed that regexes will be good enough.

I went with a good enough approach because we are not catch all server imports anyways. We are only focusing on wasp/server/* modules (for which we know they shouldn't be imported on the client). But... we don't catch stuff like some-node-dep.

I will explore the AST approach and see how it works and report back. I'll also explore the JS imports syntax and see if our regex matches all the cases.

It turns out we don't need to parse or use regexes at all. @sodic pointed me in the right direction, there is a different plugin hook called resolveId which is called when Vite wants to resolve an import (so it already parsed everything) and we can decide if we want to raise a meaningful error if we notice it's a wasp/server/* import :)

sodic

I love the change, but have some reserverations about the implementation.

sodic · 2025-02-03T14:16:28Z

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

+  return {
+    name: 'wasp-detect-server-imports',
+    transform(code, filePath) {
+      const isInDotWaspFolder = filePath.includes("/.wasp/");


Is there a more appropriate way to do this? For example, by saying "check only src"?

I've now reversed the logic and only check the files in src/ dir 👍

sodic · 2025-02-03T14:18:55Z

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

+      importStatement: match[0].trim(),
+      moduleName: match[2],


It's better to destructure the array and name each segment instead of using indexes.

sodic · 2025-02-03T14:19:24Z

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

+}
+
+function getServerImportErrorMessage(imp: Import, filePath: string): string {
+  return  `Client module "${getRelativeFilePath(filePath)}" imports server code:


This looks like a double space, don't forget to run a formatter :)

sodic · 2025-02-03T14:22:14Z

waspc/src/Wasp/Generator/WebAppGenerator.hs

+      -- Vite plugins
+      genFileCopy [relfile|vite/detectServerImports.ts|]


Instead of writing a comment, we should scope the file under an appropriately named function/variable. For example:

genVitePlugins :: ... genVitePlugins = ...

Or

genViteFiles :: ... genViteFiles ... where config = ... plugins = ...

sodic · 2025-02-03T14:26:01Z

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

+// user running the tests, which is different on different machines.
+function getWaspProjectDirAbsPathFromCwd(): string {
+  const webAppDirAbsPath = process.cwd();
+  const waspProjectDirAbsPath = path.join(webAppDirAbsPath, "../../../");


We already defined this relative path somewhere, probably in multiple places.

I know it's defined in one of our JS files. I think even Haskell code defines a constant under Project.Common (but perhaps this wasn't merged)

In any case, this knowledge should definitely come from Haskell. If you're up for it, you could change it in those other places too.

Also, I don't understand the reason we couldn't pass waspProjectDir. Could we add some more details in the comment? Perhaps an example (what it is vs. what we need)?

sodic · 2025-02-03T14:28:37Z

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"]


Hm, this is starting to feel like something we should pass in through the template.

I now pass it from Haskell and I've made the Vite plugin paths "dynamic" i.e. based on a data type.

sodic · 2025-02-03T14:29:57Z

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

+function getRelativeFilePath(filePath: string): string {
+  return filePath.replace(waspProjectDirAbsPath, "");
+}


Can we improve this function's name?

sodic · 2025-02-03T14:31:00Z

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

+  moduleName: string;
+}
+
+const importStatementRegex = /\s*import\s+(?:(?:[\w*\s{},]*)\s+from\s+)?(['"`])([^'"`]+)\1\s*/g;


Yes, could we maybe parse the import and do something with its AST (I'm not sure how powerful these plugins are, just throwing out ideas)?

Signed-off-by: Mihovil Ilakovac <mihovil@ilakovac.com>

sodic

I like the improvements, but still have a few more ideas. Lemme kno what u think :)

sodic · 2025-02-07T13:49:29Z

waspc/examples/todoApp/src/App.tsx

@@ -10,6 +10,10 @@ import { getName } from './user'
 // Necessary to trigger type tests.
 import './testTypes/operations/client'

+import { HttpError } from 'wasp/server'
+
+HttpError


Yes, I was testing the plugin, but didn't clean this up 👍

sodic · 2025-02-07T13:49:52Z

waspc/examples/todoApp/vite.config.d.ts

Another accident (the .js file too)? 😄

sodic · 2025-02-07T13:53:45Z

waspc/src/Wasp/Generator/WebAppGenerator.hs

+      genViteConfig spec,
+      genNodeTsConfigJson
    ]
    <++> genSrcDir spec
    <++> genPublicDir spec
    <++> genDotEnv spec
+    <++> genVitePlugins


I still don't think these two should be handeled separately (you put a 🚀 on the previous comment but it seems we misunderstood each other: #2442 (comment))

Node ts config, vite config, vite plugins... These are all coupled together and related to Vite It seems better to have a single Vite module/function that generates all the Vite stuff (you already have it, but just for plugins).

And here you'd just call genViteFiles spec.

I misunderstood 👍 You wanted to introduce a Vite module as a concept, makes sense.

sodic · 2025-02-07T13:55:17Z

waspc/src/Wasp/Generator/WebAppGenerator.hs

@@ -280,3 +282,12 @@ genViteConfig spec = return $ C.mkTmplFdWithData tmplFile tmplData
                SP.fromRelDir (Project.dotWaspDirInWaspProjectDir </> Project.generatedCodeDirInDotWaspDir </> C.webAppRootDirInProjectRootDir)

        importName = JsImportModule "customViteConfig"
+
+genNodeTsConfigJson :: Generator FileDraft
+genNodeTsConfigJson = return $ C.mkTmplFdWithData [relfile|tsconfig.node.json|] tmplData


While we're at it, can we rename this to tsconfig.vite.json? I know Vite uses Node, but I've always found it confusing.

Not 100% on this though, there are benefits to keeping it similar to the original.

I believe the intention behind their naming was "runtime name" e.g. Node or App vs. "purpose of files" e.g. Vite or source files. I might be wrong. I can rename it now if you want, I could go either way.

If we rename it to be specific to Vite, then I can pull this into the Vite module as well which is a nice way to encapsulate Vite stuff. I'll go for it.

sodic · 2025-02-07T13:56:52Z

waspc/src/Wasp/Generator/WebAppGenerator/Common.hs

+vitePluginsDirInWebAppDir :: Path' (Rel WebAppRootDir) (Dir WebAppVitePluginsDir)
+vitePluginsDirInWebAppDir = [reldir|vite|]


I don't think this needs to be in Common. Vite is the only one using it, so best to keep it in Vite's module.

If we end up needing it somwhere else, we'll have to hoist it. But that's a good thing - It will make us think twice about breaking encapsulation.

sodic · 2025-02-07T14:13:53Z

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

+function ensureNoServerImports(source: string, relativeImporter: RelativePath): void {
+  for (const check of serverImportChecks) {
+    if (check(source)) {
+      throw new Error(
+        `Server code cannot be imported in the client code. Import from "${source}" in "${relativeImporter.relativePath}" is not allowed.`
+      )
+    }
+  }
+}


This thing will fail on the first server import it detects. Is that on purpose?

Can we maybe collect and report all of them?

The hook runs once per import, so we can't really enumerate the server imports before reporting back. If we didn't throw the error here, it'll probably fail by trying to import the server module.

sodic · 2025-02-07T14:15:05Z

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

+type RelativePath = {
+  relativePath: string
+}


This can be a branded type to avoid redundant nesting:

type RelativePath = string & { _brand: 'relativePath' }

Effective TS talks about this I think, but I don't remember which item it is.

sodic · 2025-02-07T14:20:35Z

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

+      if (!isPathToUserCode(importerRelativePath)) {
+        return
+      }


To go a step further with the "Parse, don't validate" philosohpy, we could do this:

type RelativePathToUserCode = string & { _brand: 'relativePathToUserCode' } // I used null, but you can also create a Result type function parsePathToUserCode(importerRelativePath: RelativePath): RelativePathToUserCode | null // ... function ensureNoServerImports(source: string, relativeImporter: RelativePathToUserCode): void

This "ensures" (module type assertions) we never call ensureNoServerImports without first verifying that we're dealing with user code.

sodic · 2025-02-07T14:21:13Z

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

+const serverImportChecks: ImportCheckPredicate[] = [
+  (moduleName: string) => moduleName.startsWith('wasp/server'),
+]


Why is this an array? Do we expect to have multiple ways of deciding whether something is a server import?

If we want to expand how we detect server imports, we can e.g. imports starting with node:. I didn't want to do it because users only reported problems with wasp/server/* confusion.

sodic · 2025-02-07T14:22:43Z

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

+  const waspProjectDirAbsPath = path.join(webAppDirAbsPath, '{= waspProjectDirFromWebAppDir =}')
+  return waspProjectDirAbsPath


I'd probably return right away, without the extra variable - the function's name already tells us what we're getting.

Signed-off-by: Mihovil Ilakovac <mihovil@ilakovac.com>

infomiho and others added 13 commits January 8, 2025 17:35

Detect server imports WIP

62257a1

Signed-off-by: Mihovil Ilakovac <mihovil@ilakovac.com>

Use generator. Cleanup.

1d038d8

Add relative file path generation

4409c34

e2e tests

92f11f7

Signed-off-by: Mihovil Ilakovac <mihovil@ilakovac.com>

Fix todoApp server import

153ece5

"Going into production" docs update (#2373)

01e431e

Fixes deployment docs links

c1569bb

Update client env vars import in docs

ab9488d

Update config.yml

1da01dc

Deployment docs extras (#2443)

dcc2119

Add react-dom and react-router-dom deps validation (#2445)

52653be

Validate env vars with Zod (#2362)

ba85650

Project dir computation change

e42b9fa

infomiho marked this pull request as ready for review January 20, 2025 12:13

Merge branch 'main' into miho-detect-server-imports-on-client

577de0c

Martinsos reviewed Jan 28, 2025

View reviewed changes

sodic requested changes Feb 3, 2025

View reviewed changes

Merge branch 'main' into miho-detect-server-imports-on-client

1ac0354

sodic mentioned this pull request Feb 6, 2025

Build time validation for client env #2392

Open

infomiho added 6 commits February 6, 2025 17:11

Use resolveId hook instead of transform

68767f9

Cleanup

7276406

e2e tests

5279cda

Signed-off-by: Mihovil Ilakovac <mihovil@ilakovac.com>

Update path logic.

34fff43

Update tsconfig.node.json generation

30e9ac3

e2e tests

4ad2972

Signed-off-by: Mihovil Ilakovac <mihovil@ilakovac.com>

sodic reviewed Feb 7, 2025

View reviewed changes

infomiho added 4 commits February 7, 2025 16:58

PR comments

2934492

PR comments

80cbb46

e2e tests

dc17770

Signed-off-by: Mihovil Ilakovac <mihovil@ilakovac.com>

e2e tests

2f93d7e

Signed-off-by: Mihovil Ilakovac <mihovil@ilakovac.com>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Detecting server imports on the client #2442

Detecting server imports on the client #2442

infomiho commented Jan 9, 2025

Martinsos Jan 28, 2025

sodic Feb 3, 2025

infomiho Feb 4, 2025

infomiho Feb 7, 2025

sodic left a comment

sodic Feb 3, 2025

infomiho Feb 7, 2025

sodic Feb 3, 2025

sodic Feb 3, 2025

sodic Feb 3, 2025

sodic Feb 3, 2025

sodic Feb 3, 2025

infomiho Feb 7, 2025

sodic Feb 3, 2025

sodic Feb 3, 2025

sodic left a comment

sodic Feb 7, 2025

infomiho Feb 7, 2025

sodic Feb 7, 2025

sodic Feb 7, 2025

infomiho Feb 7, 2025

sodic Feb 7, 2025

infomiho Feb 7, 2025

infomiho Feb 7, 2025

sodic Feb 7, 2025

sodic Feb 7, 2025

infomiho Feb 7, 2025

sodic Feb 7, 2025

infomiho Feb 7, 2025

sodic Feb 7, 2025 •

edited

Loading

sodic Feb 7, 2025

infomiho Feb 7, 2025

sodic Feb 7, 2025 •

edited

Loading

		-- Vite plugins
		genFileCopy [relfile\|vite/detectServerImports.ts\|]

		vitePluginsDirInWebAppDir :: Path' (Rel WebAppRootDir) (Dir WebAppVitePluginsDir)
		vitePluginsDirInWebAppDir = [reldir\|vite\|]

		const waspProjectDirAbsPath = path.join(webAppDirAbsPath, '{= waspProjectDirFromWebAppDir =}')
		return waspProjectDirAbsPath

Detecting server imports on the client #2442

Are you sure you want to change the base?

Detecting server imports on the client #2442

Conversation

infomiho commented Jan 9, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sodic left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sodic left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sodic Feb 7, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sodic Feb 7, 2025 • edited Loading

Choose a reason for hiding this comment

sodic Feb 7, 2025 •

edited

Loading

sodic Feb 7, 2025 •

edited

Loading