Import JS library via script tag

A JS SDK library I need to use recommends importing a browser bundle by adding a script tag to index.html:

<script
src="https://unpkg.com/algosdk@v1.23.2/dist/browser/algosdk.min.js"
  integrity="sha384-1gIB0FiLMNmJ7adAfBOdH20Mnw0DZarB9D3PTozUAhKn/uT9CpHdaSbBIpmZTgrU"
  crossorigin="anonymous"
></script>

<script
src="https://unpkg.com/algosdk@v1.23.2/dist/browser/algosdk.min.js"
  integrity="sha384-1gIB0FiLMNmJ7adAfBOdH20Mnw0DZarB9D3PTozUAhKn/uT9CpHdaSbBIpmZTgrU"
  crossorigin="anonymous"
></script>

Can I add this to a route index.tsx for the page where I will use this SDK? And then, how do I import it and use functions from the SDK?

22 Replies

lxsmnsyc•2y ago

hmmm, since it is served in unpkg, why not install the npm package

lxsmnsyc•2y ago

https://www.npmjs.com/package/algosdk

npm

algosdk

The official JavaScript SDK for Algorand. Latest version: 1.23.2, last published: 22 days ago. Start using algosdk in your project by running npm i algosdk. There are 154 other projects in the npm registry using algosdk.

SilentRhetoric•2y ago

I'm getting an error that I'm totally stumped how to solve

lxsmnsyc•2y ago

well you can add that script

SilentRhetoric•2y ago

Dev mode works fine, but trying to do a build fails 'default' is not exported by node_modules/.pnpm/js-sha512@0.8.0/node_modules/js-sha512/src/sha512.js, imported by node_modules/.pnpm/algosdk@1.23.2/node_modules/algosdk/dist/esm/src/nacl/naclWrappers.js file: /Users/name/Code/alright-solid/node_modules/.pnpm/algosdk@1.23.2/node_modules/algosdk/dist/esm/src/nacl/naclWrappers.js:2:7 1: import nacl from 'tweetnacl'; 2: import sha512 from 'js-sha512'; ^ 3: export function genericHash(arr) { 4: return sha512.sha512_256.array(arr);

lxsmnsyc•2y ago

btw are you using Vite or SolidStart

SilentRhetoric•2y ago

Both?

lxsmnsyc•2y ago

so SolidStart then

SilentRhetoric•2y ago

yes

lxsmnsyc•2y ago

you can add that script to root.tsx

SilentRhetoric•2y ago

I've been going down a rabbit hole of trying to fix this build error

lxsmnsyc•2y ago

of course, your last problem would be how to use it with TS in which I cannot help you

SilentRhetoric•2y ago

because one of the dependencies of algosdk use require() Can I have this script only load when on a certain page route, though? That's why I was thinking of putting it in a particular route's index.tsx Any idea where I could see an example of a project that relies on a library that is imported via <script>?

lxsmnsyc•2y ago

not in SPA. If you visit page A as initial page then went to page B using the routing, the script is still loaded

SilentRhetoric•2y ago

I want this library only to be loaded on page B but not on landing page A

lxsmnsyc•2y ago

well yeah what I'm saying is once you change pages via router, the script is still loaded unlike in MPAs say if you go page A: no script loaded page B: script is loaded back to page A: script is loaded (due to page B)

SilentRhetoric•2y ago

but that's kind of secondary to my main issue which is I have no idea how to use this library and cant get a production build to work this is fine I just don't want this SDK library to load on the marketing page lol only when they get deeper into the app

mdynnl•2y ago

// @ts-ignore
import * as _algosdk from 'algosdk/dist/browser/algosdk.min.js';
const algosdk: typeof import('algosdk') = _algosdk;

// @ts-ignore
import * as _algosdk from 'algosdk/dist/browser/algosdk.min.js';
const algosdk: typeof import('algosdk') = _algosdk;

SilentRhetoric•2y ago

Whoa, thank you Let me try this @mdynnl I used solid.new to create a clean example to try this

SilentRhetoric•2y ago

https://stackblitz.com/edit/github-m4hvca?file=src/App.tsx

Solidjs - Templates - StackBlitz

Vite + solid templates

mdynnl•2y ago

probably forgot to install it

SilentRhetoric•2y ago

ok that fixed that error trying in my local project now So I can get the build script to work but it fails on starting the build

undefined:1
require('crypto')
^

ReferenceError: require is not defined in ES module scope, you can use import instead
This file is being treated as an ES module because it has a '.js' file extension and '/Users/name/Code/alright-solid/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
    at eval (eval at nodeWrap (file:///Users/name/Code/alright-solid/dist/server-86e62de6.js:25657:19), <anonymous>:1:1)
    at nodeWrap (file:///Users/name/Code/alright-solid/dist/server-86e62de6.js:25657:19)
    at createMethod (file:///Users/name/Code/alright-solid/dist/server-86e62de6.js:25641:17)
    at file:///Users/name/Code/alright-solid/dist/server-86e62de6.js:26075:18
    at file:///Users/name/Code/alright-solid/dist/server-86e62de6.js:26087:4
    at file:///Users/name/Code/alright-solid/dist/server-86e62de6.js:26088:3
    at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:518:24)

undefined:1
require('crypto')
^

ReferenceError: require is not defined in ES module scope, you can use import instead
This file is being treated as an ES module because it has a '.js' file extension and '/Users/name/Code/alright-solid/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
    at eval (eval at nodeWrap (file:///Users/name/Code/alright-solid/dist/server-86e62de6.js:25657:19), <anonymous>:1:1)
    at nodeWrap (file:///Users/name/Code/alright-solid/dist/server-86e62de6.js:25657:19)
    at createMethod (file:///Users/name/Code/alright-solid/dist/server-86e62de6.js:25641:17)
    at file:///Users/name/Code/alright-solid/dist/server-86e62de6.js:26075:18
    at file:///Users/name/Code/alright-solid/dist/server-86e62de6.js:26087:4
    at file:///Users/name/Code/alright-solid/dist/server-86e62de6.js:26088:3
    at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:518:24)

This is the crux of my issue that require() is in some of the libraries that are used internally by algosdk server-*.js has this section:

      var nodeWrap = function (method, is224) {
        var crypto = eval("require('crypto')");
        var Buffer = eval("require('buffer').Buffer");

      var nodeWrap = function (method, is224) {
        var crypto = eval("require('crypto')");
        var Buffer = eval("require('buffer').Buffer");

which seems to be what breaks the ES module But I don't know how to fix this

Gaming

Programming

Import JS library via script tag