btoa is not defined

[jewe11er]

trafficstars

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

[silencesys]

Could you please describe the error a little bit more?

[jewe11er]

I tried to use Silentbox in Nuxt app.

[ArmanNik]

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]

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]

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: