Split client & serverside imports

[DavidWells]

Currently imports work with a single simple import statement, e.g.

import googleAnalytics from '@analytics/google-analytics'

This is great for dev ergonomics but causes issues with typescript because the serverside code can have different types than the client code 😅. Bummer! Reference issue in TS repo

---

So it appears we need a different approach to this.

It will most likely look something like this with client and server import paths

// import client side code for browser
import googleAnalytics from '@analytics/google-analytics/client'

// import server side code for node enviroment
import googleAnalytics from '@analytics/google-analytics/server'

Not as pretty but this should solve typescripts inability to resolve the correct type files.

---

Open to suggestions if anyone has ideas on this 😃

[dobesv]

I guess when you run typescript to compile your code, it can't really tell which code is client code and which is server code, and so it doesn't really have a way to choose types based on that. It works in JS only because the file to import is resolved at runtime so it knows whether it's in a browser or in node.

I'm not sure there's a good way to define the types without separating the imports, or at least giving the option to do so.

The only way it would work is to define types that allow client and server operations both, or else some kind of lowest common denominator.

Probably better to just have separated imports, though. Even in JS it'll help people avoid accidentally importing the wrong version of the API.

[dobesv]

Since "server" analytics are not that common, maybe the top-level default import would be for client code, and you could use /server on the end to import the server stuff?