React output is not compatible with Remix.js (remix.run)

[adrm]

Remix is a new React* framework that is gaining a lot of popularity this days, focused on performance, simplicity and allowing you to create frontend and backend together in a single file even, following web standards for communication and getting progressive enhancement without extra effort.

I expected that Stencil generated React libraries would just work with Remix, but that is not the case. I know it is not only a problem for our Stencil component library because the same happens with the @ionic/react package.

In my tests, it seems that Remix expects type: "commonjs" in package.json but Stencil defaults to module, so it seems like a compatibility problem between CJS and ESM. Switching either of those two to the other type also fails.

Should we expect for our component libraries and Ionic to work with remix? Or is this error expected and due to be fixed from the Remix side? In that case, could you specify what the problem is and open an issue in the Remix repo, since I'm sure you will be able to explain it more precisely?

*At least for the moment, because the framework is architected so other frontend frameworks can be plugged in. In fact, it would be awesome to integrate Stencil with it to be honest. Other frameworks like Qwik are already working on it, and angular support is in the works too.

[rwaskiewicz]

Hey @adrm, could you provide us with a minimal reproduction case of how you're using Stencil + React + Remix?

[benelan]

Here is a repro case: https://github.com/benelan/stencil-remix

[benelan]

I was able to get the components to render on the client, but that defeats the purpose of using an SSR framework. Remix has an issue discussing support for pre-rendering, which is needed to make them a viable option for us. So in my opinion this isn't an issue on Stencil's end.

[adrm]

I would be happy with the possibility of using Ionic or our own stencil component libraries in Remix, even not benefitting from SSR.

[benelan]

@adrm does following the working example from my previous comment not work for you?

[adrm]

I checked it out but it doesn't seem very maintainable. I'm hoping for the Stencil/Ionic team to be able to fix this so that no config or minimal config is needed, like with other React libraries.

[deleonio]

Since some weeks I checked the remix approach - that is not a stencil thing.

The web components will be load async in the browser - that is not SSR.

Is there any way to render web components SSR?!

[benelan]

Is there any way to render web components SSR?!

Stencil provides a hydrate bundle for SSR/SSG frameworks that support prerendering.

[adrm]

Anyway, why should Ionic and other Stencil-generated component libraries have to be incompatible with Remix? Maybe I want to just add some component in a Remix app and unless this works as advertised, my only choice would be to rewrite it to React and ditch stencil.

I agree that making them compatible also supporting SSR as Stencil already supports would be great, but just making them work with the React bindings even though they are loaded client-side would be a great step forward.

Is there interest from Ionic the company to make this work in the near future? Or should we start looking to migrate away from Stencil?