React + MeshJS error when using `import { MeshProvider } from '@meshsdk/react';` after manual install via webpack

[ojonah]

ERROR in ./node_modules/@emurgo/cardano-message-signing-browser/cardano_message_signing_bg.js Can't import the named export '__wbindgen_realloc' (imported as 'wasm') from default-exporting module (only default export is available)

webpack compiled with 448 errors and 2 warnings

The error is above, for background I'm trying to use Mesh in a React project. I followed the manual installation using the webpack option. and have added the webpack.config.cjs code into the existing webpack.config.js I found in the project. I'm getting the error anytime i try to use import with @meshsdk. Like import { MeshProvider } from '@meshsdk/react';

I'm certain I've done something wrong, any guidance would help.

[chrissiwaffler]

do you happen to use Next.js? @ojonah

[ojonah]

No, I have not used Next.js before. Is that required?

[chrissiwaffler]

no, @ojonah it's not required.

So you're just using React with webpack 5, right?

[ojonah]

@chrissiwaffler Yes, the frontend is just React-bootstrap. My package.json its showing webpack 5.90.3 The webpack file I found in the project is in node_modules -> react-scripts -> config -> webpack -> webpack.config.js

[ojonah]

I'm suspecting the error message I'm encountering suggests that there's an issue with the way the @emurgo/cardano-message-signing-browser package is being imported. How can I check the webpack configuration to ensure that the webpack configuration is set up correctly to handle the imports from @emurgo/cardano-message-signing-browser, and to make sure that I'm using the appropriate loader for WebAssembly modules. @chrissiwaffler @abdelkrimdev do you have any suggestions on how to get started troubleshooting the errors?

[abdelkrimdev]

Hi @ojonah, have you tried to add

 experiments: {
    asyncWebAssembly: true,
  }

to your webpack config?

[JaniPrasant]

@ojonah I'm having the same issue, did you find solution for the same?

[nguyenvuhoang]

Check #183

[nguyenvuhoang]

if the error still occurs at your end, you might want to look into my this answer: https://github.com/MeshJS/mesh/pull/152#issuecomment-1708656146

[HinsonSIDAN]

Packaging has been refactored entirely since version V1.6, please re-open if issue persists