[SSR - Quasar CLI Vite] How to properly separate server and client dependencies?

[gustavotoyota]

I want to add Objection only to the server, but it's also appearing in the client code.

[TobyMosque]

do u're doing that in a ssr middleware?

[gustavotoyota]

No, I'm not using SSR middlewares.
I'm trying to execute that code in the preFetch of App.vue.
The server compiles and runs correctly, but the client throws an error:

Cannot destructure property 'KnexOperation' of 'KnexOperation_1' as it is undefined.

And I see that objection was bundled into client-side code.

[gustavotoyota]

This error only happens on production, not on development.

[TobyMosque]

IMHO: preFetch isn't the right place for that, but if u wanna some piece of code to run only at the side side (or only at the client side), u can do that:

instead of

import { doSomethingOnServer } from 'server-only-package'
import { doSomethingOnClient } from 'client-only-package'

export default {
  async preFetch ({ ssrContext }) {
    if (ssrContext) {
      const res = await doSomethingOnServer()
    } else {
      const res = await doSomethingOnClient()
    }
  }
}

you would do:

export default {
  preFetch () {
    if (process.env.SERVER) {
      const { doSomethingOnServer } = require('server-only-package').default
      const res = await doSomethingOnServer ()
    }
    if (process.env.CLIENT) {
      const { doSomethingOnClient } = require('client-only-package').default
      const res = await doSomethingOnClient()
    }
  }
}

but i still think that would be done in a SSR middleware

import { doSomethingOnServer } from 'server-only-package'

export default async ({ app  }) => {
  const apiRoute = app.route('/api')
  apiRoute.get('/do-something', (req, res) => {
    const res = doSomethingOnServer()
    res.send(res)
  })
}

so, in the preFetch

import axios from 'axios'

export default {
  async preFetch () {
    const res = await axios.get('/api/do-something')
  }
}

[gustavotoyota]

I didn't know that conditional import trick. Pretty useful. Thank you!