I am currently facing a unique challenge in my web app development process. Specifically, I am using the Vite framework with the svelte-ts template setup to build an application that integrates different libraries for WebXR based augmented reality. The goal is to switch between these libraries easily to compare their performance on different pages or Svelte components tied to various routes.
The dilemma arises from the fact that each of these libraries relies on different versions of THREE.js:
- The first option is the latest version of
THREE.js. - The second option is
A-Frame, which utilizes a forked version of THREE known as "super-three" but shares the same global context as THREE. - The third option is
ModelViewer, which uses an older version of THREE.
Attempting to install all these libraries into the same Node.js modules folder via npm results in conflicts due to their respective dependencies. Using options like "--legacy-peer-deps" or "--force" during installation proves ineffective since it does not allow me to enforce the use of a specific version (and super-three poses further complications).
Implementing import aliases is not feasible, as A-Frame and ModelViewer require direct access to THREE without any modifications internally. Moreover, there is shared code crucial for the general app and all three WebXR components to utilize. Although I attempted a monorepo approach where each WebXR component has its own submodule with a separate node_modules folder, everything ended up being installed at the root level, leading to the same conflicts. It is imperative to maintain a single deployable app.
- / (root level)
- node_modules/
- packages/
- three/
- src/
- package.json
- ...
- aframe/
- src/
- package.json
- ...
- model-viewer/
- src/
- package.json
- ...
- shared
- src
- package.json
- ...remaining vite, typescript and svelte stuff
Exploring the possibility of developing the entire app in Svelte, while having the three WebXR pages as static HTML pages linked separately with dependencies loaded through <script></script> tags, also presented challenges in accessing the shared code. Perhaps compiling all shared code into a standard shared.js file that both Svelte components and independent pages can utilize would be a viable solution?
Dynamic imports were considered, but they still necessitate the prior installation of dependencies in the node_modules folder, leading to conflicts. How can I resolve this issue effectively to ensure a unified deployable app?