Size of CSL library in react-app

[Fourzin]

Hi, I am importing CSL in a react app. using the asmjs package i.e. "import * as WASM @emurgo/@emurgo/cardano-serialization-lib-asmjs;"
The project works fine. However, the overall size of the project is huge. 48 MB. Without the CSL package it goes down to 2 MB. Is this normal?

[lisicky]

Hi @Fourzin! We don't optimize a CSL packages size, but the future we will probably add a size optimization. There is an example how you can optimize a library size #420

[Fourzin]

I managed to import the nodejs version which is significantly smaller. However, I get this error

cardano_serialization_lib.js:26 Uncaught TypeError: TextDecoder is not a constructor
at ./node_modules/@emurgo/cardano-serialization-lib-nodejs/cardano_serialization_lib.js (cardano_serialization_lib.js:26:1)

[lisicky]

@Fourzin you can find answer in this issue #150 . Let me know if it won't help.

[Fourzin]

It does not help much. They recommend using asmjs version of CSL which is what I want to avoid. using broweser version gives a large list of errors in the format of

ERROR in ./node_modules/@emurgo/cardano-serialization-lib-browser/cardano_serialization_lib_bg.js 27:40-58
Can't import the named export 'memory'.'buffer' (imported as 'wasm') from default-exporting module (only default export is available)

[Fourzin]

@lisicky how can I use wasm-loader to import cardano-serialization-lib-browser to a reactjs application?

[lisicky]

@Fourzin it might help #295 (comment)
If you will have problem with that line

 webpackConfig.resolve.fallback = {
                buffer: require.resolve('buffer/')
            }

you can try to delete it. Also this repo can help to override webpack config https://github.com/timarney/react-app-rewired
Another way to slove that problem you can find here #415

[Fourzin]

@lisicky neither worked. I already have react-app-rewired installed. I tried edidting the webpack to add the changes in #295 however the same errors stayed. I also tried to copy the config code of webpack config as is but the compiler does not start and give an error of "overrides.webpack is not a function"

[Fourzin]

@lisicky ok I got it work by modifying the webpack config using #295 and what I already have added through the search. However, it only works locally. If I deploy the files online the page does not load and I get the following error

Uncaught (in promise) TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm'.

[lisicky]

@Fourzin Check this #416
Don't be afraid to use the search : )

[Fourzin]

@lisicky Unfortunately many answers are not complete. I understand the issue now better, but I need to know how to enable mime type in the hosting server I guess from what I understood. Will look that up