React

This section lists some common compatibility requirements and how to address them

Running into an issue and don't see something here? Get in touch!

Polyfills

Craco for React Apps

You may need to update your craco.config.js file (or create a new one) with the following

const webpack = require("webpack");
module.exports = {
  webpack: {
    plugins: {
      add: [
        new webpack.ProvidePlugin({
          Buffer: ["buffer", "Buffer"],
        }),
      ],
    },
    configure: (webpackConfig) => {
      // ts-loader is required to reference external typescript projects/files (non-transpiled)
      webpackConfig.module.rules.push({
        test: /\\.tsx?$/,
        loader: "ts-loader",
        options: {
          transpileOnly: true,
          configFile: "tsconfig.json",
        },
      });
      webpackConfig.resolve.fallback = {
        // crypto and stream needed for @celo/utils
        crypto: require.resolve("crypto-browserify"),
        stream: require.resolve("stream-browserify"),
        url: false,
        zlib: false,
        https: false,
        http: false,
      };

      return webpackConfig;
    },
  },
};