MFE: How to Stream Qwik into a non Qwik host ? (out of bounds inflate access)

[arctic mica]

Hello !

I was trying to mount qwik into a non qwik application as a container (will attach below)

This gets me so far that I have the container rendered & it appears that it has access to the loader and everything else (see image)

Unfortunately, when I try resuming the container it gives me the the error out of bounds inflate access. This happens becuase $refMap$ is empty, but what exactly populates it?

Something I am missing, maybe an event or similar.

https://github.com/Twiggeh/mfe-qwik

[balmy plank]

iirc Misko and @harsh wolf similarly attempted to make it work for Nextjs but it wasn't trivial

web fragments look promising for that purpose https://github.com/web-fragments/web-fragments?tab=readme-ov-file it's in beta but maybe worth a try

They used qwik for one of their demos in the past https://blog.cloudflare.com/fragment-piercing

[arctic mica]

Hmm it didn't seem like the issue was interference from the other framework I'll try with just vanilla js

[zinc roost]

You're showing a nested container? I'm not sure v1 likes that

[arctic mica]

I don't completely understand, what do you mean by nested container ?

Its not

<QwikApp1>
  <QwikApp2>
  </QwikApp2>
</QwikApp1>

^- which I've gotten to work (seperate servers for app1 & app2)

but

<RandomApp>
  <QwikApp>
  </QwikApp>
</RandomApp>

In this case NG (also 2 servers)

[zinc roost]

ah ok I was confused by the script tags above the container hmm

do you have a live site I can check? Need to see what's going wrong with the inflate. Most likely it's something basic

[arctic mica]

I only have the repo for reproduction, I can see whether I can abuse codesandbox into running this

[arctic mica]

@zinc roost I'm sorry but codesandbox is refusing profusely to run this :/
Could you check the repo instead ? It has basically default ng / qwik projects inside it with ~ 6 files changed

[zinc roost]

how do I run it?

[arctic mica]

@zinc roost

1. git clone [email protected]:Twiggeh/mfe-qwik.git
2. pnpm i
3. pnpm start
4. (new terminal) pnpm qwik:dev
5. navigate to http://localhost:4200/test

basically the readme 😉

you should have both servers running like this

If i can assist in any way dont hesitate to spam / call :D

[arctic mica]

@zinc roost u were right it was something trivial lol

the qwik scripts couldnt find the container, because they were adjacent to it, not children

:D

[zinc roost]

ok so all good now? 🙂

[arctic mica]

@zinc roost Yeah, most of the remaining issues stem from the dev proxy being too dumb to route all qwik requests to qwik

[arctic mica]

@zinc roost Hey, so It unfortunately is probably no longer trivial x)

I have a docker container where it works on most machines, but when we deploy it to production, it consistently crashes with out of bound inflate errors. The two pages are completely identical, could you help with that ? Before it was because I didnt place the scripts in the correct place, but now I dont know what to do :(

[zinc roost]

Wait so they are bit for bit identical but one crashes?

Can you give me some urls?

[arctic mica]

yes

[arctic mica]

ill ask for permission