Issues with @emurgo/cardano-serialization-lib-nodejs

[emurgo]

Issues with @emurgo/cardano-serialization-lib-nodejs

[SebastienGllmt]

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: Emurgo/yoroi-frontend#1929

[edwint88]

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

[SebastienGllmt]

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.

[electic]

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:

apollographql/federation#255

Any help appreciated.

[electic]

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.

[SebastienGllmt]

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?

[electic]

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.

[SebastienGllmt]

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

[BlakeBrown]

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?

[amnambiar]

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.

[SebastienGllmt]

@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)

[amnambiar]

@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?

[SebastienGllmt]

@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

[amnambiar]

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