If you are having issues with the new Create React App in combination with the Lisk SDK, this is for you.
With the recent release of CRA and Webpack v5 it is not possible to (easily) use the frontend packages of the Lisk SDK in your project any more, especially if you need the typings. There are a number of issues, but the biggest one is the lack of Node.js Polyfills. This results into errors like Uncaught ReferenceError: Buffer is not defined.
To fix this, you’d need to edit the Webpack config. The way CRA is set up does not allow you to do this without ejecting the project (this is almost never a good idea). Alternative methods are using packages like craco or react-app-rewired that enable you to override some of the default CRA behaviours. But even then, I couldn’t get it to work properly. If you have a solution, let me know.
While looking for alternatives I came across Vite, which looked promising. It’s pretty similar to CRA, but a lot more light-weight and responsive. It too gave some issues due to a lacking Node.js Polyfill, but with some tweaks I managed to get it to work like expected. Tests were done with versions of Node up to v16.
The tweaks were as simple as:
- create a module alias for Lisk Client and point it to the browser version in vite.config.ts
- declare the types of this new alias module in a .d.ts file
I’ve published an extremely minimalistic boilerplate for anyone who wants to use it. It includes types for all packages that come with lisk-client:
GitHub - Lemii/vite-react-lisk-ts-boilerplate
Good luck 