I'm setting up a Vite + React + matrix-js-sdk project (but not using the matrix-react-sdk), and I'm trying to understand how this project is laid out.

To get things to work initially, I had to install the npm events package. I loaded Olm using wasm. Then I tried to use the sdk, and had a lot of issues with it referencing a global object that did not exist, so I do this before loading the sdk:

global = {
     window: window,
     fetch: fetch.bind(window),
     Olm: window.Olm,
     localStorage: window.localStorage
};

I then followed the pattern Element is using of importing matrix-js-sdk/src/browser-index at the root of my project, and importing all the sdk modules from matrix-js-sdk/src (instead of matrix-js-sdk top level). This caused > 350 typescript compilation errors, as it tried to compile the /src directory of the sdk, and there are a lot of errors such as indexing Partial objects and not checking if the value is defined. I tried downgrading my typescript version, but no dice.

I ended up removing the brower-index import, using matrix-js-sdk imports instead of matrix-js-sdk/src imports, and actually entirely removing my importing of the browser version that I downloaded from github.

And it..somewhat works? I can log in and interact with the server, and send encrypted messages.

tl;dr; it seems to be working now even if I don't download the browser version at all or import browser-index. What am I missing? I'm just looking for some clarity on the reason the setup is the way it is and how I should understand/interact with it, as I haven't been able to find much documentation and have just been trying to reverse engineer Element and the react sdk. A quick overview explanation would be very helpful