Remix.js is not compatible with Ionic/react

[GalO005]

What version of Remix are you using?

1.9.0

Steps to Reproduce

I created a new Remix app => installed capacitor.js (and running all the process for Ios & android) => installed ionic framework => use some Ionic elements (in root app) such as:

`import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/react';
import {setupIonicReact} from '@ionic/react';
setupIonicReact()`

Expected Behavior

Transpile with success in Remix app

Actual Behavior

I have an issue with "export"(I assume that related to transpile).
I installed ionic framework for my Remix app, but I got the following exception: "Unexpected token 'export'"
export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';

[KerryRitter]

In general you will have problems with Ionic and server-side rendering because of how Ionic uses web components under the hood.

https://github.com/KerryRitter/nextjs-tailwind-ionic-capacitor-starter/tree/allow-ssr Here's a repo where I tried to get SSR and Ionic working, but in NextJS. Perhaps it can give you some leads. It is a fork of a repo from Max Lynch @ Ionic.

[howlettt]

I ran into this error as well and fixed it by using serverDependenciesToBundle in remix.config.js:

serverDependenciesToBundle: [/.*@ionic.*/, /.*ionicons.*/, /.*@stencil.*/],

Note however after getting past that error I ran into other errors with Ionic/Stencil and server-side rendering which I have yet to find a solution to

[bybruno]

I have made some attempts without success. At the moment, using Ionic with Next.js or Remix, you may find various issues along the way.

[Santas]

Is this still an issue?

[redasys]

6 months into this ticket with no resolution? Has anyone got this working?

[nrakochy]

Looks like using the "all" option is at least is allowing the dev server to build, instead of the array of regexs in @howlettt's example

  /**
     * A list of patterns that determined if a module is transpiled and included
     * in the server bundle. This can be useful when consuming ESM only packages
     * in a CJS build.
     */
    serverDependenciesToBundle?: "all" | Array<string | RegExp>;

[germangetgloby]

Any news about that?