search

silencesys / silentbox

A lightbox inspired Vue.js component.
https://silentbox.rocek.dev
MIT License
296 stars 51 forks source link

btoa is not defined #23

Closed jewe11er closed 1 year ago

jewe11er commented 4 years ago

Get error "btoa is not defined" Line 293 in vue-silentbox.umd.js

silencesys commented 4 years ago

Could you please describe the error a little bit more?

jewe11er commented 4 years ago

I tried to use Silentbox in Nuxt app.

ArmanNik commented 4 years ago

I had the same problem in gridsome!

I fixed it by rendering the gallery only on the client side. In my case the code looks something like this:

    <ClientOnly>
      <silent-box  :gallery="gallery" ></silent-box>
    </ClientOnly>

Don't ask me why, but apparently you can't server-side render the plugin!

silencesys commented 4 years ago

Thank you for reporting, I'll check that out. I use window and document objects in Silentbox, so it might be due to that.

tennox commented 3 years ago

It's caused by this part:

if (css.map) {
  // https://developer.chrome.com/devtools/docs/javascript-debugging
  // this makes source maps inside style tags work properly in Chrome
  code += '\n/*# sourceURL=' + css.map.sources[0] + ' */'; // http://stackoverflow.com/a/26603875

  code += '\n/*# sourceMappingURL=data:application/json;base64,' + btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) + ' */';
}

client-side only fixes it :+1: