Detect server imports on the client

infomiho commented 4 months ago

Users sometimes import server specific code from wasp/server/* on the client and it's hard to debug. It's not obvious to new users that this is not something they shouldn't do since their IDE recommended the import.

Possible solution

We should tell the users "Hey you imported something from the server" in their browser.

It can be solved with a simple Vite plugin:

{
  name: "detect-server-imports-on-client",
  transform(code, id) {
    const isInDotWaspFolder = id.includes(".wasp");

    if (isInDotWaspFolder) {
      // Skip checking files in .wasp folder.
      return;
    }

    const codeContainsServerImport = code.includes("wasp/server");

    if (codeContainsServerImport) {
      throw new Error(
        `File ${id} contains a server import. This is not allowed in the client code.`
      );
    }
  },
}

Recent Discord thread: https://ptb.discord.com/channels/686873244791210014/1244030234274168944/1244625849135665244

Martinsos commented 3 months ago

Another example of confusion that could have been avoided by implementing this: https://discord.com/channels/686873244791210014/1247941700572414033/1254123386867552417 .

infomiho commented 1 month ago

Another slightly different example: https://ptb.discord.com/channels/686873244791210014/1271071812943478824/1271071812943478824

The user got bit by process variable only available in Node.js. We could maybe also write a heuristic for that e.g. if process.env is detected in some client code - let the users know either via a warning or an error that it's not allowed.

wasp-lang / wasp

Detect server imports on the client #2067

Possible solution