Usage with webpack (create-react-app)

[davidleomay]

I tried to use the library in a React app and added the required WebPack config but I still get an error when using it (wasm.bitbox02ConnectWebHID is not a function). The WASM file is copied to the static/media folder during build.

Am I missing something?

[benma]

Hi

You are not supposed to copy the WASM file, this package consists of more code. Just add the bitbox-api dependency to your project, then

import * as bitbox from 'bitbox-api';
// ...
const device: bitbox.BitBox = await bitbox.bitbox02ConnectWebHID(onClose);

There is a demo project in this repo, see some example code here: https://github.com/digitalbitbox/bitbox-api-rs/blob/5681d82d9ce4f6350c5b889fe89fc2e9cd6b16bc/sandbox/src/App.tsx

[davidleomay]

Thanks for the response and sorry, I expressed myself badly.

I had done exactly what you suggest, installed the package via npm and imported it. On usage I however get the mentioned error. And when I run the build, WebPack copies the WASM file to the dist folder (under static/media).

[benma]

Is your project open source? If so, could you paste a link to a branch where you run into this issue? If not, would it be easy for you to create a minimal webpack project to reproduce?

[thisconnect]

Do you "resolve wasm extension", maybe that helps? https://webpack.js.org/configuration/resolve/#resolveextensions

or

• https://stackoverflow.com/questions/58259904/can-you-load-modules-with-wasm-files-into-create-react-app?rq=3
• https://www.telerik.com/blogs/using-webassembly-with-react

[davidleomay]

Thanks for the links @thisconnect, I had also tried these suggestions but they didn't work. I have now seen that these suggestions only work for older versions of create-react-app (CRA), because WebPack seems to have changed the way it loads modules (see https://v4.webpack.js.org/loaders/file-loader/). For CRA 5 I found a working example here https://github.com/ivanschuetz/wasm-cra5-rewired. Maybe you can somehow include this in your documentation 😉

Thanks for your help, @benma and @thisconnect! Closing this issue.

[benma]

@davidleomay the linked project is not using webpack it seems.

The sandbox demo app in this repo is also React and builds fine, using Vite. This is part of the docs already. Is that sufficient?

[thisconnect]

@benma the project uses react-app-rewired which seems to be a replacement for CRA's react-scripts. react-scripts is the default build tool (using webpack under the hood) for creating a new project with react CRA (create-react-app). But CRA isn't really maintained anymore afaik.

How about changing the title of this issue from Usage in React App to Usage with webpack (create-react-app) or similar, so people searching for webpack in this repos will find it.

[benma]

I'd appreciate if you @thisconnect or @davidleomay could make a PR for the needed changes in the docs, I don't think I get it enough to do it justice :)

[davidleomay]

For non-CRA WebPack projects there might be easier/other solutions. I can add a dedicated section for CRA (which still seems to be the recommended way to setup a React projects).

[benma]

@davidleomay creact-react-app is not recommended anymore, it is not maintained.

facebook/create-react-app#13072

https://dev.to/ag2byte/create-react-app-is-officially-dead-h7o

It's also not listed on https://react.dev/.

Thought the whole thing is not very well documented by React unfortunately.

[davidleomay]

@benma, my fault, you're right, I must have looked into an outdated documentation.