[Bug] Loading icon doesn't show when installed from npm

[Blankeos]

Hi @wobsoriano ! So I recently made a PR for toast.loading. I'll just preface that this bug is not related to that. I think there's something wrong with how the files are being bundled into npm.

The bug

The Loading Icon doesn't appear when solid-sonner is installed from npm. It's actually also happening on the https://solid-sonner.vercel.app/ demo.

When installed from local, it seems to work just fine. (both are the same versions by the way).

Versions I've tried with

So as mentioned, the toast.loading() PR is not the cause because the bug seems to be the same for the previous versions. I do think it's fair that it wasn't caught though. It only works in local, but breaks in npm. Kind of weird.

• 0.2.7 - version where I added the toast.loading()
• 0.2.6 - previous version before my PR

Investigation/Reproduction Steps

1. When I install solid-sonner locally to my project, there's no issues.

bun install /Users/carlo/Desktop/Projects/solid-sonner

2. When I install solid-sonner via npm, this issue comes up.

bun install solid-sonner

3. I installed both and did some diffing and there were some very particular lines that might be the culprits.

# installed the local first.
bun install /Users/carlo/Desktop/Projects/solid-sonner

# installed the npm. This won't work in runtime, we just want to diff
bun install solid-sonner-npm@npm:solid-sonner

# Diff them in VSCode
code --diff node_modules/solid-sonner/dist/dev.js node_modules/solid-sonner-npm/dist/dev.js

In line 31, this was the diff (first paragraph is the local 🍎, second is the npm 🍏)

- var _tmpl$ = /* @__PURE__ */ template(`<div class="sonner-loading-wrapper"><div class="sonner-spinner">`);
- var _tmpl$2 = /* @__PURE__ */ template(`<div class="sonner-loading-bar">`);
- var _tmpl$3 = /* @__PURE__ */ template(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" height="20" width="20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd">`);
- var _tmpl$4 = /* @__PURE__ */ template(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" height="20" width="20"><path fill-rule="evenodd" d="M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003zM12 8.25a.75.75 0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75 0 01.75-.75zm0 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z" clip-rule="evenodd">`);
- var _tmpl$5 = /* @__PURE__ */ template(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" height="20" width="20"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z" clip-rule="evenodd">`);
- var _tmpl$6 = /* @__PURE__ */ template(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" height="20" width="20"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd">`);

+ var _tmpl$ = /* @__PURE__ */ template(`<div class=sonner-loading-wrapper><div class=sonner-spinner>`);
+ var _tmpl$2 = /* @__PURE__ */ template(`<div class=sonner-loading-bar>`);
+ var _tmpl$3 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 20 20"fill=currentColor height=20 width=20><path fill-rule=evenodd d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"clip-rule=evenodd>`);
+ var _tmpl$4 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=currentColor height=20 width=20><path fill-rule=evenodd d="M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003zM12 8.25a.75.75 0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75 0 01.75-.75zm0 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z"clip-rule=evenodd>`);
+ var _tmpl$5 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 20 20"fill=currentColor height=20 width=20><path fill-rule=evenodd d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z"clip-rule=evenodd>`);
+ var _tmpl$6 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 20 20"fill=currentColor height=20 width=20><path fill-rule=evenodd d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z"clip-rule=evenodd>`);

You might notice that for the npm one, there's class=sonner-loading-wrapper>, etc. Basically it removes the quotes. I don't think that's valid HTML, so as a result the template probably doesn't get parsed on the browser.

This bundling is kind of not my expertise though. Do you have an idea on why this might happen?

EDIT: So it's not the quotes. I might have to look into this more a bit.

[Blankeos]

After looking into this, it actually wasn't the diff I mentioned. I think it was just the <Dynamic /> component in Solid. I couldn't figure out a better solution but so far, just copying the syntax from the original Sonner (react) works fine.