Yarn + ESBuild - How to import resources?

rubyonrails-talk
1

This is exactly the kind of js config I hate…

I’m using the Jumpstart template. I have added lightgallery using yarn add lightgallery

In my stimulus controller, I can import the js I need

import lightGallery from 'lightGallery';
import lgThumbnail from 'lightgallery/plugins/thumbnail'
import lgZoom from 'lightgallery/plugins/zoom'
import lgVideo from 'lightgallery/plugins/video'

and in app/assets/stylesheets/application.tailwind.css I can import

@import ‘lightgallery/css/lightgallery-bundle.css’;

This all works well except that the spinner and fonts don’t work.

They live in

/node_modules/lightgallery/images/ 
and
/node_modules/lightgallery/fonts/

In the console, I get the error

GET http://localhost:3000/fonts/lg.woff2?io9a6k net::ERR_ABORTED 404 (Not Found)

I can ‘fake’ this by just manually copying the files from node_modules into /public/fonts and /public/images - but that seems like the wrong approach.

Is there a better/proper way to do this?

2

Sure. You can use the assets config to add node_modules to the search path for fonts. Depending on how many of these different libraries you end up using, I would consider adding a line per each to your app/assets/config/manifest.js, directing the sprockets to look in the right offset directory. Each one is going to look something like

//= link_tree ../../../node_modules/lightgallery/fonts

or maybe leave off fonts and let it figure it out, that might also work. I have adapted this example from getting something out of the vendor directory, so I may not have the correct number of upward jumps in here, but this should get you close.

Walter

3

Hi Walter - thanks for the response.

No joy though I’m afraid.

I’m confident that the directory is correct - (I get an error on startup if I tweak it), but the image is not found…

Is there any other step I might be missing?

when I do a manual request for

http://localhost:3000/images/loading.gif I get

No route matches [GET] "/images/loading.gif"

whereas a normal image asset has a url like:

http://localhost:3000/assets/logo-a306f97bdfe7337812aaf2ca03415d755fc7ddc9d7b16e30b5f96a556cf6206f.svg

Am I missing a step?

thanks.

4

Are you precompiling your assets? That’s what this configuration is for, it sets up the files in this part of the tree to be fingerprinted and copied into the public/assets tree for your Web server to serve statically.

You may need to do a similar adjustment to your config/initializers/assets.rb file, although I’m not sure that is as important as it used to be in earlier versions of Rails.

Walter

5

Try leaving the “.css” off:

@import ‘lightgallery/css/lightgallery-bundle’;