config-overrides.js

const { ProvidePlugin } = require("webpack");

module.exports = {
  webpack: function (config, env) {
    config.resolve.fallback = {
      crypto: require.resolve("crypto-browserify"),
      stream: require.resolve("stream-browserify"),
      buffer: require.resolve("buffer"),
      path: require.resolve("path-browserify"),
      fs: false,
      os: false,
      net: false,
      http: require.resolve("http-browserify"),
      https: require.resolve("https-browserify"),
      zlib: require.resolve("browserify-zlib"),
      assert: false,
      url: false,
      util: require.resolve("util"),
    };

    config.plugins.push(
      new ProvidePlugin({
        Buffer: ["buffer", "Buffer"],
        process: "process/browser",
      })
    );
    config.module.rules = config.module.rules.map((rule) => {
      if (rule.oneOf instanceof Array) {
        return {
          ...rule,
          // create-react-app let every file which doesn't match to any filename test falls back to file-loader,
          // so we need to add purs-loader before that fallback.
          // see: https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/config/webpack.config.dev.js#L220-L236
          oneOf: [
            {
              test: /\.m?js/, // fix:issue: https://github.com/webpack/webpack/issues/11467
              resolve: {
                fullySpecified: false,
              },
            },
            ...rule.oneOf,
          ],
        };
      }

      return rule;
    });

    return config;
  },
};