Ionic 4 with Preact

#1

I’m anxious to get going with Ionic 4 with Preact. So far I have been unable to get it to work. Has anyone been able to successfully import Ionic 4 into a Preact project?

#2

Didn’t tried Preact but I was able to include Ionic in a “no framework” project, that’s why I’m guessing it should be possible. I wrote an article about it btw. https://medium.com/@david.dalbusco/using-ionic-without-any-frameworks-775dc757e5e8

How did you import Ionic? What do you mean with “unable to get it work”, what doesn’t work?

#3
import "@ionic/core/css/ionic.bundle.css";
import "@ionic/core/dist/ionic";

The Ionic web components are not getting registered, for some reason.

I’m new to Preact. It doesn’t have an index.html file I can use to do the and tags you used in your project. I tried using preact-helmet to set those values in the document head, but that didn’t work either.

#4

Doesn’t look like the correct way to include Web Components build with Stencil…

  1. First give a try as I describe in my article with Unpkg, just to check
<!-- Import the Ionic CSS -->
<link href="https://unpkg.com/@ionic/core@latest/css/ionic.bundle.css" rel="stylesheet">
<!-- Import Ionic -->
<script src="https://unpkg.com/@ionic/core@latest/dist/ionic.js"></script>
<!-- Optional, import the Ionic icons -->
<script src="https://unpkg.com/ionicons@latest/dist/ionicons.js"></script>
  1. Then if you would like to import Ionic using NPM, you could have a look to the StencilJS doc to see how to load and consume such components https://stenciljs.com/docs/overview
#5

The problem I was facing is that the project created by the Preact cli doesn’t have an index.html file, so there is no place to add the script and link tags. However, I was able to find this comment about using a template for the index file, which gave me the solution:

https://github.com/developit/preact-cli/issues/51#issuecomment-350592638

I then added

<script src="https://unpkg.com/@ionic/core@latest/dist/ionic.js"></script>

to the template file and it now works great.

Thank you for your suggestions.

#6

That’s tricky, didn’t now there wasn’t any index.html in Preact, well done! Glad to hear you found a solution

#7

If you build the project yourself, you can set up Preact with an index.html file. The default project that is set up by the Preact cli, however, generates the index.html file during the build process. Fortunately, it allows you to use your own template which is used to build the index.html file.

1 Like
#8

Thx for the explanation, I better understand now :+1: