How to load bootstrap-icons.svg

[cryptomilk]

Hi,

I'm trying to load bootstrap-icons.svg using shakapacker.

In applications.js I've added:

const bootstrapIconsSvg = require('bootstrap-icons/bootstrap-icons.svg')

and I can see it ended up in the app/assets/config/manifest.js as:

  "static/node_modules/.pnpm/[email protected]/node_modules/bootstrap-icons/bootstrap-icons.svg": "/packs/static/node_modules/.pnpm/[email protected]/node_modules/bootstrap-icons/bootstrap-icons-26209e210bbe23233b84.svg",

However I'm not able to reference it with asset_pack_path('bootstrap-icons.svg'). It tells me It can't find it in the manifest.

Help would be much appreciated to solve this.

Thanks you!

[Judahmeek]

app/assets/config/manifest.js is the Sprockets / Rails assets manifest.

The manifest file for Shakapacker/webpack assets would be in "#{public_root_path}#{public_output_path}" as set in your config/shakapacker.yml.

Since your SVG is apparently a Rails asset, try using Rails image tag.

Alternately, check your Webpack manifest file to confirm that the SVG isn't being inlined into a chunk.

[cryptomilk]

The issue is the the key in the manifest.json.

I can use asset_pack_path('static/node_modules/.pnpm/[email protected]/node_modules/bootstrap-icons/bootstrap-icons.svg') and that would work, but I have to change the code everytime bootstrap-icons is updated.

[tomdracz]

Hm this will be coming from

shakapacker/package/rules/file.js

Lines 7 to 29 in 0ae9408

	module.exports = {
	test: /\.(bmp|gif|jpe?g|png|tiff|ico|avif|webp|eot|otf|ttf|woff|woff2|svg)$/,
	exclude: /\.(js|mjs|jsx|ts|tsx)$/,
	type: "asset/resource",
	generator: {
	filename: (pathData) => {
	const path = dirname(pathData.filename)
	const stripPaths = [...additionalPaths, sourcePath]
	const selectedStripPath = stripPaths.find((includePath) =>
	path.startsWith(includePath)
	)
	const folders = path
	.replace(`${selectedStripPath}`, "")
	.split("/")
	.filter(Boolean)
	const foldersWithStatic = ["static", ...folders].join("/")
	return `${foldersWithStatic}/[name]-[hash][ext][query]`
	}
	}
	}

We're stripping additional_paths but we still might not strip enough.

IIRC the problem is a bit with what Webpack gives us to work with webpack/webpack#14392

[Judahmeek]

@cryptomilk I'm not sure that I can help any further because I can no longer reproduce the issues that you're getting.

The file name & path that I see in the manifest file matches the file name & path I see in the webpack output directory.

"static/assets/images/node_modules/bootstrap-icons/guest-list-accepted.png": "/webpack/development/static/assets/images/node_modules/bootstrap-icons/guest-list-accepted-b434344f6da7f4396a60.png",

find . -name "guest*.png"               
./public/webpack/development/static/assets/images/node_modules/bootstrap-icons/guest-list-accepted-b434344f6da7f4396a60.png
./client/app/assets/images/node_modules/.pnpm/[email protected]/node_modules/bootstrap-icons/guest-list-accepted.png

I've created a branch with my demo here. Set up should be as simple as cd to spec/dummy, bundle && yarn, and then edit the path of the guest-list-accepted.png to include /node_modules/.pnpm/[email protected]/node_modules/bootstrap-icons.

@tomdracz do you have any idea why an entry in his manifest is not showing up in his webpack output directory?

[tomdracz]

Hm nothing pops up initially. Wonder if there's some difference when the file is pulled from node modules as your branch is just changing the path.

Can look at this closer but could probably use small repro repo if you can roll one up @cryptomilk Got some very basic setup at https://github.com/tomdracz/shakapacker-css-test that can be used as a base (though it needs dependency updates)

[cryptomilk]

The difference is yarn vs. pnpm? Is it possible something doesn't work if pnpm is used?

[cryptomilk]

My code is at https://gitlab.com/routenbuch/routenbuch/-/merge_requests/44

[tomdracz]

@cryptomilk I pulled that branch, installed .pnpm and ran bin/shakapacker but unable to replicate the issue.

In manifest I'm getting:

  "static/node_modules/bootstrap-icons/bootstrap-icons.svg": "/packs/static/node_modules/bootstrap-icons/bootstrap-icons-26209e210bbe23233b84.svg",

And

find . -name "bootstrap-icons*.svg"
./node_modules/.pnpm/[email protected]/node_modules/bootstrap-icons/bootstrap-icons.svg
./public/packs/static/node_modules/bootstrap-icons/bootstrap-icons-26209e210bbe23233b84.svg

So this seems to be working as expected?

I would try nuking any output in public/packs, any tmp/cache things and try to recompile and see if it's still there, but it's looking like a cache/local issue to me ATM