3box-js icon indicating copy to clipboard operation
3box-js copied to clipboard
verified publisher icon 3box

Can't import 3Box through CDN script tag

Open pedrouid opened this issue 6 years ago • 2 comments

Describe the bug My app using create-react-app couldn't build 3box-js library in production mode using react-scripts build. I've had this happen to before with ipfs-js and the solution I've found was to import it in the index.html as script tag from a CDN. The CDN I've used was JsDelivr: https://www.jsdelivr.com/package/npm/3box and I used the following script tag for importing 3box/dist/3box.min.js

<script
  src="https://cdn.jsdelivr.net/npm/[email protected]/dist/3box.min.js"
  integrity="sha256-JTtnwCIomsVsZ5Uvhq8oQ8Qw1v5Qkr0UT7XGrlXTlFU="
  crossorigin="anonymous"
></script>

However the way 3box-js webpack configuration is setup, doesn't make it ES5 compatible as it transpiles commonjs modules methods like require() which return an error (screenshot bellow) ending up with no Box object in window.

To Reproduce Steps to reproduce the behavior:

  1. Create a basic html page
  2. Add the script tag above
  3. Open html page in browser
  4. See error like screenshot bellow

Expected behavior Box object would be available in window

Screenshots Screenshot 2019-05-23 16 34 52

Desktop (please complete the following information):

  • OS: [e.g. iOS]
  • Browser [e.g. chrome, safari]
  • Version [e.g. 22]

Smartphone (please complete the following information):

  • Device: Macbook Pro
  • OS: macOS Mojave v10.14.4
  • Browser: Brave v0.64.76 / Chromium v74.0.3729.157 (Official Build) (64-bit)
  • 3Box Version: 1.8.2

Additional context Although I'm using a typescript environment on WalletConnect, you should check out the webpack configuration that I used on walletconnect-monorepo: https://github.com/WalletConnect/walletconnect-monorepo/blob/master/packages/browser/webpack.config.js

pedrouid avatar May 23 '19 14:05 pedrouid

Quick update: this might be an issue with how JSdelivr delivers the bundle, I'm looking for a workaround.

pedrouid avatar May 23 '19 17:05 pedrouid

Tried to use cpx to copy the 3box.min.js from node_modules to the public folder but ended up with the same build error on the CI side.

So I just compromised into getting the v1.8.0 release build on Github and importing manually.

PS - I also couldn't build v1.8.2 locally just in case no one hasn't reported it

pedrouid avatar May 23 '19 17:05 pedrouid