The "Enable Now" button is broken when using the embeddable JS snippet but not when using the React component.

That is because embeddable configures Vite/Rollup to alias axios to redaxios and redaxios does not implement getUri.

Repro steps

• clone this repo
• yarn build
• add to example/index.html the snippet below
• yarn start:example
• open http://localhost:3000
• you should see one bell at the top (React) and one below (embeddable)
• click on the bell below (embeddable)
• click on "Enable Now"
• notice error in console Uncaught TypeError: Li.getUri is not a function
• clear localstorage (so that you can see “Enable now” again)
• click on the bell above (React)
• click on “Enable Now”
• notice no errors in console

Snippet

<div id="notifications-inbox" />

<script type="module">
  import { renderWidget } from '../packages/embeddable/dist/magicbell.esm.js';

  const targetElement = document.getElementById('notifications-inbox');
  const options = {
    apiKey: MY_API_KEY,
    userEmail: MY_USER_EMAIL,
    height: 500,
  };

  renderWidget(targetElement, options);
</script>

Solutions considered

1. use axios instead of redaxios: this would work for sure but we prolly want to keep the deps footprint as small as possible
2. replace axios.getUri in React with URL

This PR implements 2.

Difference between axios.getUri and URL

One thing I noticed that could be problematic is:

const uri = axios.getUri({
  url: "http://example.com",
  params: { p: undefined }
});
// http://example.com

uri2 = new URL('http://example.com')
uri2.searchParams.append("p", undefined)
uri2.toString()
// http://example.com/?p=undefined

There may be other encoding differences I'm not aware of.

Nota bene

I haven't run yarn changeset yet because I don't know how you want to bump this change.