23 Dec Symbol React Boilerplate

Background

The Captains completed the new Symbol-SDK v3 a while ago and Symbol-SDK v2 is due to be deprecated as soon as the new SDK is released. The latest Symbol-SDK v3 is powerful, brings new functionality and supports both the NEM and Symbol protocols. I was so excited to try it out but I faced some problems when installing the Symbol-SDK v3 React project.

Problems

There was a list of polyfill errors caused by the new Symbol SDK as it uses a library from node.js that is not compatible with the React project. But don’t worry, I will show you some magic tricks to resolve this issue!

Overwrite Webpack Config

There are some packages that need to be installed in dev dependencies. Once installed, we need to overwrite those dependencies in the webpack config from the React project.

Instead of using npm run eject, I found a better option which uses the library react-app-rewired. It will replace react-scripts in package.json.

npm i -D assert buffer crypto-browserify stream-browserify url process react-app-rewired

Update package.json file:

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
  },

To overwrite the webpack, we need to create a config-overrides.js in the root.

// config-overrides.js

const webpack = require('webpack');
module.exports = config => {
    const fallback = config.resolve.fallback || {};
    Object.assign(fallback, {
        'crypto': require.resolve('crypto-browserify'),
        'stream': require.resolve('stream-browserify'),
        'url': require.resolve('url'),
        'assert': require.resolve('assert'),
    });
    config.resolve.fallback = fallback;
    config.plugins = (config.plugins || []).concat([
        new webpack.ProvidePlugin({
            process: 'process/browser',
            Buffer: ['buffer', 'Buffer']
        })
    ]);
    return config;
};

react-app-rewired will retrieve the config from config-overrides.js and overwrite it in the existing webpack config without affecting anything else. Once you reach this stage, you should no longer see any errors!

Postscript

In this article, I have explained the problems I had and the workaround solution. I created the boilerplate repository, which you can find on GitHub: symbol-react-boilerplate. Anyone can just clone it, and start a new Symbol project with React. The boilerplate also includes eslint rules used by the Symbol Syndicate team. It will make your code look clear, consistent, and readable. Who knows, someday Symbol Syndicate team may review your project! 😁

Hopefully this boilerplate can help the community to create amazing projects. If you want to know more about Symbol, please join Discord.

Special thanks to Ninelives for reviewing this article.