dev/build handles env inconsistently

[shjyh]

I used a Vite plugin that allows using C language-style conditional compilation in the code.

The simplified code looks like this:

// v-ifdef SSR
import db from "./db"
// v-endif

export default function findProduct() {
  // v-ifdef SSR
  return db.findProduct()
  // v-else
  return fetch("/api/product/search").then(res => res.json())
  // v-endif
}

This allows different logic branches for SSR and CSR bundles.

During the build compilation, everything works fine. However, in dev mode, it seems that there is no separate compilation for SSR and CSR. The code received in the browser is from the SSR conditions, including the database connection code.

If I use import.meta.env.SSR, the build mode relies on tree shaking to achieve different code inclusion for SSR and CSR. In dev mode, it includes all the code and injects something like import.meta.env = {SSR: false} at the top of the CSR file to make the browser execute the CSR code path.

However, some third-party libraries can only be executed on the server and should not be bundled and sent to the browser. This is because these packages would throw errors in the browser environment.

here is a demo project: https://github.com/shjyh/astro-env-demo

I Want to generate a separate CSR bundle in dev mode with the same effect as in the build

[thejackshelton]

Hey @shjyh! Sorry for not responding to this issue much sooner! 😓

I have been focusing on critical fixes for the integration. I tried debugging this earlier on and didn't get very far, which I should've also posted here in the issue.

I have found this repo: https://github.com/PatrickJS/qwik-ssg-csr-only

Which uses CSR. I don't think we've set anything with CSR for the integration, since we use renderToString on the components. You can have something only on the client with a visible task, and I also believe we build the client code separately before then passing it in to the server.

Just not sure exactly where to go from there 🤔 . If you might have some insight there. Also don't let me stop you from making a PR!

Happy to help answer any questions you might have on the integration.

[thejackshelton]

Hey @shjyh! I have been swamped lately, trying to do the best I can to maintain the integration. Would you like to take a stab at adding this functionality?

[shjyh]

Hey @shjyh! I have been swamped lately, trying to do the best I can to maintain the integration. Would you like to take a stab at adding this functionality?

Sure, I'll try to see if I can fix the issue.

[thejackshelton]

Hey @shjyh! Did you find anything interesting? And have you tried the isServer and isBrowser conditionals from @builder.io/qwik/build?

[thejackshelton]

Closing due to inactivity. Happy to take another look if there's a clear bug in the integration with a minimal reproduction.