Angular 12 (webpack 5) and erdjs throws errors about mx-sdk-js-core HOT 8 CLOSED

Just a quick note: Erdjs is intended for use in the browser, so it's mostly a webpack/configuration issue.

Will try later to reproduce the problem :)

from mx-sdk-js-core.

Ok I have reproduced the error and it seems like __dirname is used in the following files:

https://github.com/ElrondNetwork/elrond-sdk-erdjs/blob/main/src/smartcontracts/wrapper/systemWrapper.ts#L11

https://github.com/ElrondNetwork/elrond-sdk-erdjs/blob/main/src/testutils/wallets.ts#L49

According to nodejs.org its a difference between es modules and commonjs modules.
https://nodejs.org/api/esm.html#esm_differences_between_es_modules_and_commonjs

One can also take a look at the issue here:
nodejs/help#2907

So as far as I understood it we should replace all occurences of __dirname with smth like this:
nodejs/help#2907 (comment)

from mx-sdk-js-core.

Have you done any other changes? I tried this fix and I get

/node_modules/@elrondnetwork/erdjs/out/smartcontracts/wrapper/systemWrapper.js:4:18-31 - Error: export 'fileURLToPath' (imported as 'fileURLToPath') was not found in 'url' (possible exports: Url, format, parse, resolve, resolveObject)

./node_modules/@elrondnetwork/erdjs/out/testutils/wallets.js:4:19-32 - Error: export 'fileURLToPath' (imported as 'fileURLToPath') was not found in 'url' (possible exports: Url, format, parse, resolve, resolveObject)

The thing is....

the exported method si right there, I don't understand how it was not found. Tried to rebuild and all and still getting this.

Did it just "work" for you out of the box after making the changes?

from mx-sdk-js-core.

Fixed it by doing this:

import { URL } from 'url'; 
const __dirname = new URL('.', import.meta.url).pathname;

but instead now I'm getting
Uncaught ReferenceError: exports is not defined

only in the wallet.js file we had to change the __dirname earlier.

Probably it's the same issue where this is not available in an ES module.

from mx-sdk-js-core.

Thanks @MWFIAE for the later fix.

And in node_modules in @elrondnetwork/erdjs/out/smartcontracts/wrapper/systemWrapper.js

SystemConstants.SYSTEM_ABI_PATH = path_1.default.join(__dirname, "../../../abi");

replaced with

SystemConstants.SYSTEM_ABI_PATH = path_1.default.join(".", "../../../abi");

from mx-sdk-js-core.

Hi, i have setup a git repository with a workaround for using erdjs with angular. https://github.com/andreigiura/angular-erdjs-project , it is not pretty, since i have compiled the browser version of erdjs and paste it in the project, but it work for now, until we will figure it out.

from mx-sdk-js-core.

Hi, i have setup a git repository with a workaround for using erdjs with angular. https://github.com/andreigiura/angular-erdjs-project , it is not pretty, since i have compiled the browser version of erdjs and paste it in the project, but it work for now, until we will figure it out.

Have you guys made any progress on figuring this out?

from mx-sdk-js-core.

This has been fixed in erdjs 10 (we are currently preparing the release), since the packages causing the issue have been extracted to separate repositories:

• https://github.com/ElrondNetwork/elrond-sdk-erdjs-walletcore
• https://github.com/ElrondNetwork/elrond-sdk-erdjs-contract-wrappers

As of v10, erdjs does not depend on fs and crypto anymore.

from mx-sdk-js-core.