There doesn’t seem to be much about it in Google’s caches yet so if anyone succeeded (without breaking other stuff 
) in the task of integrating Svelte into the esbuild environment of Phoenix 1.6.x, sharing the experience and hints would be appreciated.
2 Likes
Hey. I haven’t integrated Svelte into my projects, but what is your exact difficulty? Are you trying to avoid using NPM? If so, unless someone pre-packages svelte into an hex package you will have to use NPM, because other than that I don’t see a major difference between integrating Svelte into Phoenix than any other Backend framework.
Unless you mean SvelteKit? That would be pretty much impossible at this stage to integrate other than just using Phoenix for the service side of things (Rest or GraphQL, etc.).
I surely would be happy to get rid of node but since it’s there for other reasons anyway, so that’s not about it. It’s about integrating Svelte into the watch'n build process. IOW - I’d like to have .svelte components built and usable in Phoenix application. Similar to how other “assets” are built on-the-fly as needed in dev environment. the Mostly for some interactive and reactive widgets here and there. Something what I had for the previous versions. Setup well outlined here: https://dkuku.github.io/phoenix-svelte-setup
So basically the problem is replacing Webpack with esbuild for Svelte.
Because after that is a matter of adding a watcher in the dev config file to watch the npm build process.
Apparently esbuild is not as well supported in svelte as in webpack, it is possible with something like this: GitHub - EMH333/esbuild-svelte: An esbuild plugin to compile Svelte components there is also an example of a plugin from evan: can we use Svelte in esbuild? · Issue #8 · evanw/esbuild · GitHub but that is kinda an old issue, don’t know how well it works.
Yeah, I found those, plus
https://esbuild.github.io/plugins/#svelte-plugin
but I would appreciate some hints how to correctly plug that into Phoenix/mix
I use svelte and liveview, just not in the same project. In both cases, I use snowpack, I would imagine that it should have no problem handling both svelte and liveview together. Also, snowpack can optionally use esbuild underneath as a JavaScript minimizer
@silverdr I made this little demo just for educational purposes where I integrate phoenix 1.6, esbuild, svelte and tailwindcss , GitHub - roger120981/svelte_phoenix: Template to integrate phoenix.16, esbuild, svelte and tailwindcss , Just a detail in the case of tailwindcss being in a windows 10 environment, I had to make some modifications to the original watcher, but it works perfectly in linux and svelte works well, only that it is a small step for complex apps.
pd: Use esbuild-svelte as a svelte plugin
1 Like
This looks promising, thank you! I’ll have a closer look and report. In my case it is enough if it works with Linux and OSX.
@silverdr ok, I just created and updated a branch that works on linux / osx https://github.com/roger120981/svelte_phoenix/tree/linux-tailwind
1 Like
I did a quick git clone followed by mix deps.get and when trying to run the server I get a few warnings:
warning: :telemetry.span/3 is undefined (module :telemetry is not available or is yet to be defined
followed by:
could not compile dependency :phoenix_live_dashboard, "mix compile" failed. Errors may have been logged above. You can recompile this dependency with "mix deps.compile phoenix_live_dashboard", update it with "mix deps.update phoenix_live_dashboard" or clean it with "mix deps.clean phoenix_live_dashboard"
** (MatchError) no match of right hand side value: {:error, {:telemetry, {'no such file or directory', 'telemetry.app'}}}
(phoenix 1.6.2) lib/mix/tasks/compile.phoenix.ex:19: Mix.Tasks.Compile.Phoenix.run/1
(mix 1.13.0) lib/mix/task.ex:397: anonymous fn/3 in Mix.Task.run_task/3
(mix 1.13.0) lib/mix/tasks/compile.all.ex:92: Mix.Tasks.Compile.All.run_compiler/2
(mix 1.13.0) lib/mix/tasks/compile.all.ex:72: Mix.Tasks.Compile.All.compile/4
(mix 1.13.0) lib/mix/tasks/compile.all.ex:59: Mix.Tasks.Compile.All.with_logger_app/2
(mix 1.13.0) lib/mix/tasks/compile.all.ex:36: Mix.Tasks.Compile.All.run/1
(mix 1.13.0) lib/mix/task.ex:397: anonymous fn/3 in Mix.Task.run_task/3
(mix 1.13.0) lib/mix/tasks/compile.ex:131: Mix.Tasks.Compile.run/1
This is on Linux / master branch. If I switch to linux-tailwind branch I get:
Error: Cannot find module 'esbuild'
Require stack:
- /home/silverdr/sources/silverdr/elixir/svelte_phoenix/assets/build.js
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15)
at Function.Module._load (internal/modules/cjs/loader.js:746:27)
at Module.require (internal/modules/cjs/loader.js:974:19)
at require (internal/modules/cjs/helpers.js:93:18)
at Object.<anonymous> (/home/silverdr/sources/silverdr/elixir/svelte_phoenix/assets/build.js:1:17)
at Module._compile (internal/modules/cjs/loader.js:1085:14)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
at Module.load (internal/modules/cjs/loader.js:950:32)
at Function.Module._load (internal/modules/cjs/loader.js:790:12)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:76:12) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'/home/silverdr/sources/silverdr/elixir/svelte_phoenix/assets/build.js'
]
}
[error] Task #PID<0.467.0> started from SveltePhoenixWeb.Endpoint terminating
** (stop) :watcher_command_error
(phoenix 1.6.2) lib/phoenix/endpoint/watcher.ex:55: Phoenix.Endpoint.Watcher.watch/2
(elixir 1.13.0) lib/task/supervised.ex:89: Task.Supervised.invoke_mfa/2
(stdlib 3.16.1) proc_lib.erl:226: :proc_lib.init_p_do_apply/3
Function: &Phoenix.Endpoint.Watcher.watch/2
Args: ["node", ["build.js", "--watch", {:cd, "/home/silverdr/sources/silverdr/elixir/svelte_phoenix/assets"}]]
internal/modules/cjs/loader.js:905
throw err;
^
Any quick fixes for that?
In the case of the esbuild error, just install the dependency, cd assets npm i esbuild, must be above 0.9.6 which is the version that svelte-esbuild needs, in this case it tells you that it cannot find that module because it has not been installed
In the case of elixir I use version 1.12.1, erlang otp 23 and it compiles well for windows 10 and for linux with the ubuntu 18.04 distro
Try to install that stack, delete the dependencies and rebuild it, it should work for telemetry case
Well, I did npm install upfront. Was kind-of expecting that things needed for the example to work would already be present in package.json so the initial impression was that it might be something deeper. After adding it there the error is in fact gone. Checking further.
Mine are:
$ elixir --version
Erlang/OTP 24 [erts-12.1.5] [source] [64-bit] [smp:8:8] [ds:8:8:10] [async-threads:1] [jit]
Elixir 1.13.0 (compiled with Erlang/OTP 24)
and I need these due to some dependencies breaking on earlier versions. It does not complain on the “linux” branch though.
In this case I already fixed that error, I added it to the package.json and it was uploaded to github
For now it was only an educational exercise, with the idea of helping people who wanted to see how to make the integration of the different tools possible.
However, the objective is met because the telemetry error is on the backend side and does not hinder the integration of svelte with phoenix 1.6. If you want to see it running, you could install the aforementioned stack using the asdf plugin that allows you to install different versions without damaging other projects.
Thank you for that. The integration part is exactly what I am/was looking for. Still need to do more thorough checking but on the surface the linux-tailwind works as expected and recompiles Svelte stuff on the fly. And faaast too! 
1 Like
Excellent, very happy to help, happy new year 2022 for you and all the community!!
2 Likes
@silverdr, I just finished switching Svonix over to ESBuild - maybe you’d find the way the plugin is declared useful?
Granted in my case components are not all bundled into the same file but rather imported on demand upon declaration in a phx template.
2 Likes
@nikokozak Yes – thank you – every little bit counts! I still haven’t migrated the project in question to 1.6, but this surely will be of help. Thanks for taking time to post information here.
P. S. I noticed you “loosely” based it on Sveltex, which I found not to be up to snuff for some use cases, but that’s another, only “loosely” related story 
1 Like
