remix icon indicating copy to clipboard operation
remix copied to clipboard

Remix.js is not compatible with Ionic/react

Open GalO005 opened this issue 2 years ago • 3 comments
trafficstars

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';

GalO005 avatar Jan 01 '23 04:01 GalO005

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.

KerryRitter avatar Jan 02 '23 02:01 KerryRitter

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

howlettt avatar Jan 12 '23 04:01 howlettt

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.

bybruno avatar Jan 16 '23 21:01 bybruno

Is this still an issue?

Santas avatar Apr 30 '23 16:04 Santas