sreyansjain

Can someone please explain how to get inertiajs running with svelte5 and phoenix. Just a Hello World

Hello,

I want to test inertiajs and svelte5. I have been doing liveview for years now, but I have no experience with client side frameworks like svelte, react, vue etc.

The tooling (esbuild) is really difficult to set up for me.
I am trying to follow the instructions in Inertiajs but then i get the error import.meta is not defined.

I am trying to setup esbuild script and sometimes i get import_meta not available in iife. I set the format to esm, then the thing compiles but no response in the web page. It gives some module export kind of error which I fail to understand.

Can someone be so kind to just mention the steps to get a fresh install of phoenix, inertiajs and svelte5 working. Just a hello world would be enough.

Thank you so so much.

PS. I tried following - GitHub - tonydangblog/phoenix-inertia-svelte: A guide and example project…, but get the above errors.

4 comments

/phoenix #inertiajs #svelte5

2 741 4

2025-07-01 23:22:39 UTC

Most Liked

skyturtle

Hey,

I’ve got an example app with Phoenix, Inertia.js v2, and Svelte 5. Here’s the repo and it’s deployed at https://svelix.skyturtle.io/ using Coolify.

Without seeing your code, it’s hard to say what the issue might be. But from your example of import_meta not available..., it sounds like you may be using code examples that were meant for Vite, which a lot of JavaScript tooling and frameworks are geared towards.

I used the repo you linked as an example as well. The app.js and build.js were incredibly helpful (thanks @tonydang !). That project used Inertia v1 so I had to make some tweaks, but it’s fairly similar. I also have serverOpts, but I haven’t been able to get SSR working yet. Client-side rendering works fine though.

One thing you will notice in my build.js is conditions: ['svelte'],. I have no idea what this actually does, but it was the only way I could get the assets to build in development and on deployment. I’ve tried reading the docs several times, but I still don’t understand what exactly it does. If any one knows, I’m all ears.

I definitely understand your frustrations with the tooling. I hit roadblocks building and deploying assets with error messages that were hard to figure out. I see why the Phoenix team made the move to an esbuild wrapper. Unfortunately, Svelte requires an esbuild plugin, which is not supported by the wrapper. I actually built the same app using React instead of Svelte. esbuild has built in support for JSX so you can use the esbuild wrapper (as they do in the Inertia.js Phoenix adapter docs). Building and deploying that app was much simpler.

The README has some additional details. I’m still updating it as I make changes, but I think it will be enough to get you started. Hope that helps!

Post #2

ravecat

@skyturtle thank you very much for your example, it helped clarify some issues. phoenix 1.8 required a small change, I have put it as an example in the repository

unfortunately SSR still doesn’t work. did you find a solution?

Post #3

ravecat

@skyturtle transfer Phoenix + Inertia projects to vite thanks to a project from this topic. I’ll leave an example in repository for the future. SSR is still a work in progress, but I’m quite happy with the current result

Post #5