Investigate "build issues"

[AndreasGassmann]

Describe the bug (current behavior)
There have been reports that the SDK does not work in some conditions, eg. when webpack is not used.

Expected (correct) behavior
The SDK should work, regardless of the build system.

Screenshots and/or logs
#124

[thecatrine]

I looked into this while trying to get the Taquito wallet example to run with parcel. I suspect at least the bug with sodium is being caused by a compatibility issue with the typescript compiler with import * as blah from 'blah' imports vs import blah from 'blah' imports wiith default exports.
The sodium object imported fine, but all the utils were namespaced under sodium.default.what_have_you

I got a local version of the library to work with parcel/the example by replacing the imports with import sodium from 'libsodium-wrappers' and adding "allowSyntheticDefaultImports": true, to tsconfig.json

[thecatrine]

Interestingly, parcel 1 builds it successfully and parcel 2 does not. I think parcel 2 switched from tsc to babel, and there's different default import behavior potentially.

[roxaneletourneau]

Hi @AndreasGassmann
We get a server build issue on our website that is built with Docusaurus and it seems to be related to the SDK also.

[PureSpider]

This is still broken when trying to use this library with parcel:

TypeError: sodium.crypto_generichash is not a function
    at Object.<anonymous> (index.fd532818.js:92560)
    at step (index.fd532818.js:92493)
    at Object.next (index.fd532818.js:92442)
    at fulfilled (index.fd532818.js:92405)

[PureSpider]

@thecatrine how did you manage to get it to build with parcel 1? Which version did you try with, exactly?

[dribnet]

For me parcel 1 was working fine up to beacon-sdk version 6.4.0-ledger.0, but after that the library is unusable with the same reported bug:

@mattdesl provides a nice test case for this issue at ecadlabs/taquito#882

[crcdng]

Interestingly, parcel 1 builds it successfully and parcel 2 does not. I think parcel 2 switched from tsc to babel, and there's different default import behavior potentially.

I am using parcel 1.12.5 and it does not build.

[clemsos]

Is there any updates on this? I am struggling to get the sdk to work with my bundler (vitejs) but still get TypeError: sodium.crypto_generichash is not a function. Many thanks !

[thecatrine]

@clemsos Are you able to build with the fork mentioned in the PR above?

[clemsos]

@thecatrine hmmm it didnt work for me - see the #251 (comment)

[BerkeleyTrue]

seeing the same issue in a clojurescript shadow-clj project.

[AndreasGassmann]

@BerkeleyTrue Can you try to install version 2.4.0-beta.2?

[BerkeleyTrue]

@AndreasGassmann yup, looks like it's fixed

[souljorje]

@AndreasGassmann also fixed for me (vite + vue).

"vite": "^2.7.6"
"vue": "^2.6.14"
"@airgap/beacon-sdk": "^2.4.0-beta.2"
"@taquito/beacon-wallet": "^9.1.0"
"@taquito/taquito": "^9.1.0"

More: ecadlabs/taquito#882 (comment)

[mikesizz]

Bump!

What is the status of this issue? I am using a fresh install of the taquito and beacon-wallet sub packages and I am hitting this issue.

If I downgrade to the mentioned version 6 everything works fine, but with any upgrades it busts. This seems like a total deal breaker as I'm using no tools or frameworks. Literally just fresh package installs with a fresh browserify install. Help!

Also, all of the documentation links are dead. It feels impossible to get started developing with this lib please help!

[thecatrine]

@mikesizz are you on the beta version mentioned above? Can you share a minimal example that breaks?

[mikesizz]

Steps to reproduce:

• npm init new project
• npm install the following

"@airgap/beacon-sdk": "^2.4.0-beta.2"
"@taquito/beacon-wallet": "^9.1.0"
"@taquito/taquito": "^9.1.0"
"browserify": "^17.0.0"

• add the following file dep.entry.js

"use strict";

(function () {
  window.TezosToolkit = require('@taquito/taquito').TezosToolkit;
  window.BeaconWallet = require('@taquito/beacon-wallet').BeaconWallet;
})();

• add the npm command ./node_modules/.bin/browserify ./dep.entry.js > ./public/dapp/deps.js
• add front end js file with following contents

 var BeaconWallet = window.BeaconWallet;
 var wallet = new BeaconWallet({
     name: 'TEST',
 });

• open file in browser and get the error TypeError: sodium.crypto_generichash is not a function

If I switch to the version 6.4.0-ledger.0 for taquito and beacon-wallet it works fine.

[AndreasGassmann]

If you don't use a framework or modern build tools, we have a browserified of the beacon-sdk available: https://unpkg.com/@airgap/[email protected]/dist/walletbeacon.min.js

Taquito also has a browserified version available, but I'm not sure if it includes the beacon-sdk: https://unpkg.com/@taquito/[email protected]/dist/taquito.min.js

I am not familiar with browserify, but in our build pipeline, we have to use the ES5 code for the browserify build. The ES5 code is also shipped as part of the beacon-sdk npm module, it is located in the dist/cjs folder.

My assumption is that your project still uses beacon-sdk < 2.4.0-beta.2 because taquito has a dependency on 2.x.x, which does not match beta versions. You can check your package-lock.json file to see if an old version of the beacon-sdk is still installed. If it is, try forcing the newer version and see if that works. (see https://stackoverflow.com/questions/58065817/npm-force-package-lock-to-update-a-sub-dependency-package)

Also, all of the documentation links are dead.
Both https://docs.walletbeacon.io/ and https://typedocs.walletbeacon.io/ are working, AFAIK we do not have any other documentation.

[mikesizz]

Thanks @AndreasGassmann. My apologies about the docs comment! It was late and I got mixed up with which repo I was commenting on (Taquito's docs are broken atm).

I really appreciate the CDN links; I'll use those for now. I will probably use the same approach you describe regarding using ES5 code. From my understanding this issue stems from using the newer JS import statement?

In any event, I hope we can find some resolution on this for the long term.

[HirotakaAseishi]

I have the same issue using vite(SvelteKit).

console error is
sodium3.randombytes_buf is not a function

I don't be familiar with vite but it may fail to build or read wrong path.
is this vite problem?

[mikesizz]

I don't use svelte but I've seen others mention this issue with svelte and vite.

I'll see if I can find the thread...

[mikesizz]

That was fast, haha. Sorry it was vue not svelte, but they do mention vite, so hopefully this may help you.

ecadlabs/taquito#882 (comment)

[HirotakaAseishi]

@mikesizz Thank you for the comment! It's the same problem as you say. I've tried some adjustment, but it's still not working with sveltekit.

I'll continute to try. thank you!

[inartin]

...From my understanding this issue stems from using the newer JS import statement?

I have tried with ES5 syntax, and I get the exact same error in the final. (Also using the browserify)

const taquitoToolKit = require('@taquito/taquito').TezosToolkit;
const beaconWallet = require('@taquito/beacon-wallet').BeaconWallet;

window.tezostoolkit = taquitoToolKit
window.beaconwallet = beaconWallet;

Was anyone here able to solve this issue?

[mikesizz]

I was never able to solve it. For now I'm using the CDN version until the project is ready for production.

At that point my plan is to investigate using parcel in the ci/cd pipeline to bundle up this particular dep until a solution presents itself.

It's beyond suboptimal to have a totally different build tool just for this dependency, but I don't really see a solution for now. 🤷‍♂️

Edit:
My original comments around using import are in regards to code being used internally in the lib not the way you import the lib.

[fredcy]

That was fast, haha. Sorry it was vue not svelte, but they do mention vite, so hopefully this may help you.

ecadlabs/taquito#882 (comment)

The hints in that taquito issue got me past the "TypeError: sodium.crypto_generichash is not a function" error.

But the need to use different Beacon modules based on the dev vs build environment (for vite) suggests that something is still off with how Beacon-SDK builds and distributes its modules.

[AndreasGassmann]

Libsodium has been removed and was replaced by @StableLib a while ago, so those issues should no longer exist.