Meteor 1.10 ionic 5 React

I have installed ionic 5 React in meteor 1.10 and importing ionic components gives me this error

 Cannot read property 'dynamicImport' of undefined

the app code has nothing

 import React from "react";
 import {IonApp} from "@ionic/react";


 export const App = () => (
   <IonApp>
   test
   </IonApp>
 );

I have not worked with Meteor but I suppose it is some problem of the way that imports the components

Any idea how to fix it ??

You are most likely running into an issue where the esm version of the package is being loaded and rather than the commonjs. You may find that setting up the package to be recompiled via meteor.nodeModules.recompile as described in the Meteor Guide solves this issue.

https://guide.meteor.com/using-npm-packages.html#recompile

Thanks for answering, I have tried to configure ā€œnodeModulesā€ ā€œrecompileā€ but there is no change, also and create the symbolic links in links / "ionic and in this case it gives me two errors
Cannot find module './ion-app_8-md.entry.js'
Cannot read property ā€˜isProxiedā€™ of undefined
I try to find these errors in google, but I canā€™t find a solution,

Do you possibly have a public repo that I could clone to try to help debug this?

is a basic meteor project with react
meteor create --react app-test
and
meteor npm i @ionic/react

and on App.jsx

import React from "react";
 import {IonApp} from "@ionic/react";


 export const App = () => (
   <IonApp>
   test
   </IonApp>
 );

Iā€™ve been trying to import the components for two days, I think. It would be a great achievement to get it, since it seems to me a very good combination of cordova, ionic and meteor
Thanks

Ok, Iā€™ve been out hiking most of the day. As soon as Iā€™m home and settled in, Iā€™ll look into this and see if I can get anywhere.

1 Like

So unfortunately I didinā€™t get very far with this. As far as I can tell, this may be something to do with webpack and they way it handles dynamic imports. Unfortunately ionic seems pretty coupled with itā€™s set of tooling. I know that at one point there was Meteoric which decoupled all of the components and packaged them for Meteor but Iā€™m sure itā€™s likely outdated at this point.

One possible way to still accomplish your end goal may be to use Meteor for the server and build the mobile app using ionic. 2 days ago I published v2 of @socialize/react-native-meteor which includes changes that allow it to be used outside of React Native. Expo is also is also a fantastic way to use React Native if you end up doing in that direction.

Sorry I couldnā€™t be of more help.

yes i think the alternative is react native. Thank you

I took a closer look at I reached the same conclusion as @copleykj, it seems that Ionic components are making assumptions about the underlying build tool when lazy loading the components, and this lazy loading is configured by default. Their approach is different than something like MUI React where each component is atomic and can be imported in isolation regardless of the build tool being used.

It seems that ionic 5 wants to take complete control of the client and then output a static files to be packages either on mobile or as PWAs using their CLI tool. Theyā€™re using web components under the hood and have some bindings with react.

In that case Iā€™d recommend using Meteor as a backend and just use SimpleDDP or GraphQl.

Here is an article referencing how the components are loaded, theyā€™re essentially esm modules proxied at the client and loaded on demand. https://stenciljs.com/blog/how-lazy-loading-web-components-work

For what itā€™s worth, we ran into this same issue when upgrading to Meteor 1.10 in our app which uses ionic 5 and we were able to work around the issue by causing Meteor to package the commonjs version of ionic instead of the ES5 version.

The solution was to update the package.json in the @ionic/core loader and specify the common js entry point for the ā€œbrowserā€ build (which the Meteor build tool will favor).

app/node_modules/@ionic/core/loader/package.json

{
  "name": "ionic-loader",
  "typings": "./index.d.ts",
+  "browser": "./index.cjs.js",
  "module": "./index.mjs",
  "main": "./index.cjs.js",
  "node:main": "./node-main.js",
  "jsnext:main": "./index.es2017.mjs",
  "es2015": "./index.es2017.mjs",
  "es2017": "./index.es2017.mjs",
  "unpkg": "./cdn.js"
}

Weā€™re tracking that one file in our repository as well in case we need to update (or reinstall) npm packages and the change gets undone.

2 Likes

Thanks, Iā€™ll check it out

Great job, is work perfectly