cardano-serialization-lib

cardano-serialization-lib copied to clipboard

Using webpack 5.24.4

1. Error: Cannot find module 'util' is thrown when loading. Commenting out const { TextDecoder } = require(String.raw); fixes the issue, but is there a way to achieve this without modifying the code myself?

2. path set on const path = require('path').join(__dirname, 'cardano_serialization_lib_bg.wasm'); yields incorrect path as this does not lead to node_modules directory

3. WebAssembly.Compile is disallowed on the main thread, if the buffer size is larger than 4KB. Use WebAssembly.compile, or compile on a worker thread is thrown. This is fixed only when I replace

const wasmInstance = new WebAssembly.Instance(wasmModule, imports);
wasm = wasmInstance.exports;
module.exports.__wasm = wasm;

with

WebAssembly.compile(bytes).then((
    mod => {
        WebAssembly.instantiate(mod, imports).then(
            wasmInstance => {
                wasm = wasmInstance.exports;
                module.exports.__wasm = wasm;        
            }
        );
    }
));

1. You may need a polyfill for text-decoder. This is a common issue with WASM on older platforms
2. Haven't heard of this before. Probably it's caused by a different issue
3. Historically WASM modules have to be imported asynchronously. Webpack 5 added support for synchronous loading of WASM if you set an experimental flag for it though. Typescript also has better support for WASM than Babel I think.

Having a similar issue with Webpack 5. Is there an example of how to make this work? A similar issue can be found here for another package:

https://github.com/apollographql/federation/issues/255

Any help appreciated.

I updated Yoroi to Webpack 5 a few months ago and didn't have any issues at the time. Maybe this PR is useful to you: https://github.com/Emurgo/yoroi-frontend/pull/1929

Took a look at this, I think the difference here is your use babel-node when calling different npm run functions and we just use webpack. The result is that babel-loader does not polyfill node_modules because it is ignored in most configs.

Here is our package.json file:

"scripts": {
    "build-main": "cross-env NODE_ENV=production webpack --config webpack.main.prod.config.js",
    "build-renderer": "cross-env NODE_ENV=production webpack --config webpack.renderer.prod.config.js",
    "build": "npm run build-main && npm run build-renderer",
    "start-renderer-dev": "webpack serve --config webpack.renderer.dev.config.js",
    "start-main-dev": "webpack --config webpack.main.config.js && electron ./dist/main.js",
    "start-dev": "cross-env START_HOT=1 ELECTRON_IS_DEV=1 npm run start-renderer-dev",
    "start-prod": "cross-env START_HOT=1 ELECTRON_IS_DEV=0 npm run start",
...

Here is our dev config for webpack:

{
                test: /\.js$/,
                exclude: /node_modules\/(?!(bech32|ripple-lib))/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'],
                        plugins: ["@babel/plugin-syntax-dynamic-import"]
                    }
                }
            },

I think this is the issue. Also, Polkadot folks seem to use wasm with no issue at least that I can see.

https://www.npmjs.com/package/@polkadot/wasm-crypto

I took a look at this and would be curious to see what the difference is in packaging is.

Every WASM project has at least two different builds:

• NodeJS build
• Browser build

If you're trying to connect from Webpack, you need to use the browser build, but it sounds like you may be trying to use the nodejs build. Can you make sure you're using https://www.npmjs.com/package/@emurgo/cardano-serialization-lib-browser when building for a web environment?

hi hi. Actually we use webpack to package an electron app. The module actually sits in the main node.js process not the render process. Webpack just happens to package the whole thing up.

The new 7.1.0 release includes a fix for Webpack 5 builds that may help you if you're still having issues

Any solution to "Cannot find module 'util'" ? I've tried to add a polyfill and nothing.

Not sure if anyone here is using Nextjs, but I'm having the same issue where it can't find the util module. When I comment out the line, or add a polyfill, I get a new error

Error: ENOENT: no such file or directory, open '/Users/blakebrown/Documents/Code/wagmi/.next/server/cardano_serialization_lib_bg.wasm

Has anyone been able to successfully load this library in Next?

Hi,

I've been hit with this same error (as in issue 1 in the first post) while trying to bundle my app:

I'm using "@emurgo/cardano-serialization-lib-nodejs": "^11.2.1". Is there any way to resolve this, and actually use the imported modules from the package?

I am trying to initiate a transaction from a connected wallet in the cardano browser extension

Please help.

@amnambiar the error is telling you what to do. You have to specify the resolve.fallback fields inside your webpack config. If you're using a build system that is hiding the webpack config from you, you may have to "eject" to modify it

Also note you're using the nodejs bindings. If you're using a browser extension, you may be interested in the browser bindings instead (separate NPM package)

@SebastienGllmt A bit of a context - I'm working on a react web application, and trying to interact with cardano wallets from JS. I've created the app using create-react-app; and the app bundles using npm.

Do I still need to use browser bindings?

@amnambiar yeah, most likely you want the browser bindings if you're not depending on any nodejs scripts for your build process. This library is more low-level, so if you want a more high-level library for interacting with Cardano I suggest using Lucid

Thanks @SebastienGllmt , Replaced @emurgo/cardano-serialization-lib-nodejs with @emurgo/cardano-serialization-lib-asmjs and this was resolved!