[go: nahoru, domu]
Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Images only loading from within entrypoints directory #97

Closed
2 tasks done
Jonic opened this issue Jul 7, 2021 · 4 comments
Closed
2 tasks done

Images only loading from within entrypoints directory #97

Jonic opened this issue Jul 7, 2021 · 4 comments
Labels
documentation Improvements or additions to documentation

Comments

@Jonic
Copy link
Jonic commented Jul 7, 2021 •
edited
Loading
  • I have tried upgrading by running bundle update vite_ruby.
  • I have read the troubleshooting section before opening an issue.

Packages

npm

  • "vite": "^2.4.1"
  • "vite-plugin-environment": "^1.0.1"
  • "vite-plugin-full-reload": "^0.2.2"
  • "vite-plugin-ruby": "^2.0.4"

Gems

  • vite_rails (2.0.12)
  • vite_ruby (1.2.15)

Description 📖

I've been trying to migrate a Rails Webpacker app to vite-rails, but I'm encountering a problem that appears to be a bug (possibly a regression), according to the troubleshooting guide.

My app/frontend directory matches that in the "entrypoints" section of the docs.

I'm trying to use vite_asset_path to load an image kept in app/frontend/images, but is isn't loading, and it's not present in the public/vite/assets directory. If I move the image to inside app/frontend/entrypoints, then vite_asset_path is able to load it.

This is confusing because the troubleshooting guide specifically answers a question about images "only load[ing] if placed on entrypoints".

Adding to the confusion, one of the examples for vite_asset_path references images/logo.svg, without specifically mentioning where this images directory exists, which gives the impression that this is the example images directory mentioned in the "entrypoints" section.

Is this actually a bug, and loading from app/frontend/images should be possible? Or is it only the case that vite_asset_path will only be able to see anything kept in app/frontend/entrypoints?

Whatever the case, I think the Rails tag helper docs and troubleshooting guide are confusing matters a little, and I would have also expected a warning or error upon passing a file into vite_asset_path that isn't found in the manifest.

I've checked the example Rails app, which does keep its images in app/frontend/entrypoints/images, so after all this I can't figure out if I've read the docs incorrectly, or if something's missing from the docs, or if the docs are incorrect, or if all of this is actually a bug!

Sorry for writing such a huge issue. Any help would be appreciated!
@Jonic Jonic added the bug: pending triage Something doesn't seem to be working, but hasn't been verified label Jul 7, 2021
@ElMassimo ElMassimo added documentation Improvements or additions to documentation and removed bug: pending triage Something doesn't seem to be working, but hasn't been verified labels Jul 7, 2021
@ElMassimo
Copy link
Owner

Hi Jonic!

The Troubleshooting guide is indeed misleading in this scenario, I will update it accordingly.

To answer your question, all tag helpers including vite_asset_path can only reference files in the entrypoints directory.

If you are only referencing images from any JS or CSS processed by Vite, you would be able to import them without placing them under entrypoints.

@ElMassimo
Copy link
Owner

Updated the docs, removed the reference to an unrelated older issue in Vite, and clarified where the assets are located in the Rails vite_asset_path example.

Thanks!

@Jonic
Copy link
Author
Jonic commented Jul 7, 2021

@ElMassimo Thanks for the clarification - it's much clearer now! I was hoping to use Github's ViewComponent gem, keeping each component's assets with the Ruby class and erb template, for example:

app/components/header_component
  ./header.rb
  ./header.erb
  ./header.scss
  ./header.js
  ./images/logo.svg

I understand that I'd have to import the Sass and JS from an entrypoint, and that these files can in turn load images, but would I be unable to reference the images with vite_asset_path since they're not in the entrypoints directory? I'm still trying to figure out if Vite Ruby could be an easy-ish drop-in replacement for our current setup, or if it would involve significant reshuffling and a massive PR to make it all happen. Apologies if I'm being dense!

@ElMassimo
Copy link
Owner

@Jonic If you are referring to Sidecar Assets, it should be possible to do something similar in Vite Ruby.

Instead of require.context you would use a globEager import.

Here's an example using globEager to register all Stimulus controllers.

If you are referencing individual assets from Rails views or partials directly, then it's not going to be a drop-in replacement, but if you are combining the components in a single "pack" it should be easier.

would I be unable to reference the images with vite_asset_path since they're not in the entrypoints directory?

No. When using Vite.js you would ideally import the images in the relevant component and use their source in the component itself.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
documentation Improvements or additions to documentation
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@Jonic @ElMassimo