Vite entrypoint being hit, but the component is not being rendered...

[brennacodes]

First of all, this gem is awesome. I hope it never dies.
I'm using Vite with a new Ruby on Rails application (Ruby 3.2.2, Rails 7.1.0.beta1).
I have connected a button to trigger a call to one of my Rails routes (/signup).
I'm using js-from-routes to facilitate the request.

Problem:

Everything seems to be working as expected, right up until the response hits the Vite entrypoint. Everything seems to stop there.

• The response includes the expected div, with the proper id (shown here).
• It triggers the proper entrypoint.
  However, the html with the div, as well as the targeted Svelte component are never inserted into the DOM. I've attached some pictures to show what I mean.

Things I've tried:

• I've tried checking to make sure everything was named and referenced properly.
• I've tried renaming a bunch of things to see if there was some naming conflict.
• I've tried shifting things around, adding named :yield tags, etc.
• I can get the intended component to render if I place it in the application.html.erb file, so I know it's not an issue with the svelte file itself.

I just can't figure out why the html would never actually make it to the page. Is this a load order issue? Something else? I feel like I've pored over the docs, issues, PRs, google, and haven't found anyone experiencing anything similar. Any advice/help is greatly appreciated!

Request response:

Vite entrypoint:

What's in the dom:

Pages setup:

[planetaska]

From the "What's in the dom" screenshot it looks like the partial is being generated correctly, no?

Is the signup.js actually getting executed? You can test this by adding a simple console.log inside the js file.

If it is being executed, then the problem is with the imports. If the script is not being executed at all, then the issue probably lies in the vite configuration?

[brennacodes]

I just tried sticking a console.log in the signup.js file, and it looks like it's not being executed. I don't think I deviated from the tutorial you posted at all (aside from not using TS), but I'm going to try starting a fresh repo just in case I missed something.

[planetaska]

From the request response it seems like a full page redirect, which should be handled by Turbo if you have it (should be installed by default) I see you probably have --skip-javascript when creating the app.

If you add something to users/new.html.erb, will it show on the page?

[brennacodes]

Yes, I did use --skip-javascript. Should I have not used this flag?
No, nothing shows on the page unless I put it directly into the application.html.erb file

[brennacodes]

@planetaska @ElMassimo
I've just tried to start a new project several times now:

1. With Rails 7.1.0.beta1 to see if it was something I did wrong in the initial configuration.
2. With Rails 7.0.8 to see if it was a Rails version issue.
3. With 7.0.8 and typescript support to see if it was an issue there.
4. With 7.0.8 and typescript support without skipping minitest to see if it was something there.
5. WIth 7.0.8 and typescript support with minitest and a minimal gemfile to see if it was a conflict in there.
6. I also tried using your example of a blog post to see if there was something weird I was missing there.

At this point, I don't know if I'm trying to use this in the wrong way, or what, but I'm not sure how anyone would use this setup to navigate between routes/resources successfully. I can get the main page to load (no matter what I put in there), but that's about it. 😞 Trying to navigate or fetch resources and display a new view is unsuccessful. To me it seems clear that the call is being made to the backend successfully, and the server is responding successfully, but something breaks when the response is received on the client side. Like you said, @planetaska, it seems strange that the response code is missing the additional strings in the div id, but I'm not sure why that would be or where to begin debugging that. I did get your example repo working, but it also lacks the trailing random strings when I run it locally, and since it's just the one page that's rendering a Svelte component, I still can't tell if I'm doing something wrong in order to keep the FE more segregated from the BE. Thank you for helping me think through this, by the way. I really appreciate it!

@ElMassimo should I make this an issue (either here or in the js-from-routes repo)?

I can also push up and share what I'm working on if someone would like to see what I'm working with.

Does anyone know if there is a working example repo that features navigation between pages/routes/views that I can poke around in?All the ones I've come across are a single page with not much else going on (something I could make with plain Svelte/Vite), or ones that I'm also not able to get to work (like this one).

[ElMassimo]

The problem seems specific to this setup, so please don't open an issue.

I can also push up and share what I'm working on if someone would like to see what I'm working with.

Please do 😃

I'm also not able to get to work (like this one).

Can you share why that example didn't work for you?

[brennacodes]

@ElMassimo I was able to get that example working.

1. The bin/setup didn't include bundle exec vite install
2. There was a weird issue with how the servers were being started, and it kept failing saying that the port was already in use. I updated the Procfile.dev and added a bin/dev and got it running. It didn't have any useful examples for me for what I'm trying to accomplish and what I'm experiencing, though.

I'll ping you when I can get that pushed up. About to hop in a meeting 🙂

[planetaska]

To provide some context on why this issue occurs: the app in the tutorial is a regular Rails app, which means it expects routing from the Rails side. And because the app was created with --skip-javascript flag, Turbo was not installed - so XHR requests will not be handled by default. Since the js-from-routes creates XHR links (I suppose the gem is designed to work with Turbo), and because there is nothing to handle the request, the result is just ignored.

Using a regular link should solve the issue. Or as @ElMassimo has suggested, get the path directly instead of creating an XHR request. If you wanted Turbo to handle XHR requests for you (so you get partial updates instead of a full page refresh), you can install Turbo manually by following the Turbo gem's install instructions. Then the turbo'd links should work.

Regarding your question on how to add more pages in this setup: you just create new pages as you would in a regular Rails app - create the page, add a controller action, then add a route if needed.

But as suggested, if you would prefer making every page a Svelte component, InertiaJS would be the better option. So be sure to check it out!

[brennacodes]

@planetaska Thank you so much for taking the time to explain! That definitely makes sense. It sounds like Inertia probably is what I'm looking for. I'm going to check out your new tutorial shortly. 😊

[brennacodes]

@ElMassimo here's a repo that you can clone. After pulling you'll just need to:

1. Run bundle install
2. Run bundle exec vite install
3. Run rails db:{create,migrate}
4. Run bin/dev to start the server
5. Head to localhost:3000
6. Try clicking on the Sign Up button in the top right corner. This is the button that is set up to hit the /signup route on the backend and render a the Signup.svelte file in components/public_pages/Signup.svelte.

[ElMassimo]

The way it's currently setup, clicking the button makes an XHR request:

However, the server responds with HTML, so nothing happens.

Instead of fetching the result, it sounds like you would want to navigate to that page. JS From Routes helpers provide a path method that you can use in links:

<li><a href={users.new.path()}>Sign Up</a></li>

After fixing a typo:

- import EmailPasswordForm from "./forms/EmailPasswordForm.svelte";
+ import EmailPasswordForm from "~/components/forms/EmailPasswordForm.svelte";

---

If you plan on using Svelte components as pages, I highly recommend that you check out Inertia, as it would enable client-side navigation without adding any boilerplate.

[brennacodes]

Wow, Maximo, thank you so, so much! You've done really amazing work with both gems. I'm looking into Inertia now. I really appreciate your help and hard work.

[planetaska]

@ElMassimo Great to hear you solved it! I had a hunch that the js routing was causing the issue, but I haven't used the gem. I assumed it only creates route paths for use in the app, similar to the js-routes library.

@brennacodes Definitely check out InertiaJS if you are going to need a lot of client side routing! I also have written an updated tutorial for using Inertia with Rails here. If you need any help feel free to ask me on Reddit!

[brennacodes]

You both are amazing! I've learned a lot with this little road block. Thank you for all of the help! I'm super excited to dive in and get this project going again 😊