Adding ionic framework

[jsellam]

Hi, It's a very good job! But I can't use ionic components

How to reproduce :

• run on node 18 (same error with 14)
• install @ionic/react and ionicons
• white a simple functional component :

import { camera } from "ionicons/icons";
import { IonContent, IonFab, IonFabButton, IonIcon } from "@ionic/react";

export default function Index() {
  return (
    <IonContent>
      <IonFab vertical="bottom" horizontal="center" slot="fixed">
        <IonFabButton onClick={() => null}>
          <IonIcon icon={camera}></IonIcon>
        </IonFabButton>
      </IonFab>
    </IonContent>
  );
}

I got this error :

/Users/jeremie/Documents/PROJETS/RD/remixIonic/node_modules/@ionic/core/components/index.js:4
export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
^^^^^^

SyntaxError: Unexpected token 'export'
    at Object.compileFunction (node:vm:353:18)
    at wrapSafe (node:internal/modules/cjs/loader:1040:15)
    at Module._compile (node:internal/modules/cjs/loader:1076:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1166:10)
    at Module.load (node:internal/modules/cjs/loader:988:32)
    at Function.Module._load (node:internal/modules/cjs/loader:834:12)
    at Module.require (node:internal/modules/cjs/loader:1012:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (/Users/jeremie/Documents/PROJETS/RD/remixIonic/node_modules/@ionic/react/dist/index.js:6:20)
    at Module._compile (node:internal/modules/cjs/loader:1112:14)

I have tested to add serverDependenciesToBundle: ["@ionic/core"], in remix.config.js but I don't have a better result.

Have you an idea ?

thx Jeremie.

[howlettt]

I ran into this error as well and fixed it by using regex in serverDependenciesToBundle:

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

[typytypytypy]

I tried the solution above, but then I get an error:

DOMParser is not defined

Have you gotten this error and if so, how did you resolve?

[typytypytypy]

Per a discord message, I saw that ionicons had an updated version, I put this in my package.json and the DOMParser error is gone:

"ionicons": "6.1.1",