Hey there,
I saw this example/template here:
uses ionic/core and not react?
It seems to work great! But I can’t get small things to work right, like ion-menu-toggle and stuff like that.
Is this an “officially” sanctioned template?
I saw this older template:
But it looks abandoned?
Welcome to Ionic
I saw this Vercel release also and did some testing.
Repo: https://github.com/adaept/moonbase-vercel-ionic
Site: https://ae-vercel-ionic.adaept.vercel.app
Check it out on a browser and mobile.
They are using the core with angular type coding
in contrast to the react approach, i.e.
<ion-header>
vs.
<IonHeader>
I am not clear on the details. Hopefully one of the
ionic team can chime in @manucorporat
Having said that, coming from an angular background
I am happy with this approach as I do not need to
do a brain switch.
I have the same question about how it is
to be supported and what is actually going on
with the coding.
They are using @ionic/core and defineCustomElements() - see _app.tsx
Kinda weird
This is just for web though right? similar to react-native-web
I am surprised there’s no next.config.js in your repository
I like it!
It does not use SSR though - which the Vercel template has.
no, can be deployed to device
that is correct… i am running on device and it is a start… the vercel template doesnt work with Ionic and that is the problem I was trying to solve
do you have a link to the project? specifically the package json so I can see what is the difference
I made a local repo to test updating from your
hello world example.
Error: yarn dev => next is not known.
I also noticed the basic example is js and not ts.
You have a .codesandbox folder
Nextjs has a .next folder
If you look at package json you will see the project is not using the official ionic react build, it is a local build from the developer I referenced in the read me of the original project
I did it in Javascript and not typescript to make the example more approachable.
The project will deploy fine with warning on vercel
Details here:
Repo: https://github.com/adaept/moonrock-vercel-ionic
Site: http://moonrock-vercel-ionic-git-master.adaept.vercel.app/
I made a local repo to test updating from your
hello world example.
Error: yarn dev => next is not known.
I also noticed the basic example is js and not ts.
You have a .codesandbox folder
Nextjs has a .next folder
It’s interesting!
Uses ionic/core instead of react
@aaronksaunders I cannot work out what is so different in that forked ionic-react package that helps with HTMLElement is not defined error. Do you know?
@aaronksaundersI managed to fix this error without using different ionic-react. The trick is to import ionic-react components on client only using nextjs dynamic import like so
const IonApp = dynamic(
import('@ionic/react').then(mod => mod.IonApp),
{
loading: () => <span />,
ssr: false,
},
);
Interesting! Great solution for dynamic rendering!
Still no SSR though.
Ping the guy who forked it? His name is in the readme of the project I posted
do you need to do this for EVERY component??? that is a pain in the ass… I will stick with the solution I found for now.