chore: switch from react-app-rewired to craco (#572)

* chore: switch from react-app-rewired to craco

* fix: browser list for BigInt compatibility

* fix: prod build and add serve script

* chore: increase version number

Author: Manuel Gellfart

craco.config.ts

@@ -0,0 +1,24 @@
+import NodePolyfillPlugin from "node-polyfill-webpack-plugin";
+import { Configuration } from "webpack/types.d";
+
+const ModuleScopePlugin = require("react-dev-utils/ModuleScopePlugin");
+
+const config = {
+  babel: {
+    plugins: ["@emotion/babel-plugin"],
+  },
+  webpack: {
+    plugins: [new NodePolyfillPlugin()],
+    configure: (webpackConfig: Configuration) => {
+      if (!webpackConfig?.resolve?.plugins) return webpackConfig;
+
+      // Allow imports outside of src/
+      webpackConfig.resolve.plugins = webpackConfig.resolve.plugins.filter(
+        ({ constructor }: InstanceType<typeof ModuleScopePlugin>) => constructor?.name !== "ModuleScopePlugin",
+      );
+      return webpackConfig;
+    },
+  },
+};
+
+export default config;

package.json

@@ -1,20 +1,22 @@
 {
   "name": "safe-airdrop",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "license": "MIT",
   "private": true,
   "scripts": {
-    "start": "react-app-rewired start",
-    "build": "react-app-rewired build",
-    "test": "react-app-rewired test --watchAll=false --verbose",
+    "start": "craco start",
+    "build": "craco build",
+    "test": "craco test --watchAll=false",
     "lint": "eslint --max-warnings 0 .",
+    "lint:fix": "eslint --fix .",
     "coverage": "yarn test --coverage",
-    "eject": "react-scripts eject",
+    "eject": "craco eject",
     "fmt": "prettier --check '**/*.ts'",
     "fmt:write": "prettier --write '**/*.ts'",
     "prepare": "husky install",
     "generate-types": "typechain --target=ethers-v5 --out-dir src/contracts './node_modules/@openzeppelin/contracts/build/contracts/ERC20.json' './customabis/ERC721.json' './node_modules/@openzeppelin/contracts/build/contracts/ERC1155.json' './node_modules/@openzeppelin/contracts/build/contracts/ERC165.json'",
-    "postinstall": "yarn generate-types"
+    "postinstall": "yarn generate-types",
+    "serve": "npx -y serve build -p 3001"
   },
   "dependencies": {
     "@emotion/cache": "^11.10.1",
@@ -38,7 +40,6 @@
     "lodash.debounce": "^4.0.8",
     "react": "^17.0.2",
     "react-ace": "^10.1.0",
-    "react-app-rewired": "^2.2.1",
     "react-csv-reader": "^4.0.0",
     "react-dom": "^17.0.2",
     "react-dropzone": "^14.2.3",
@@ -51,6 +52,7 @@
     "typescript": "~5.0.4"
   },
   "devDependencies": {
+    "@craco/craco": "^7.0.0",
     "@simbathesailor/use-what-changed": "^2.0.0",
     "@svgr/webpack": "^8.0.1",
     "@testing-library/react": "^12.1.3",
@@ -71,6 +73,7 @@
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "husky": "^8.0.3",
+    "node-polyfill-webpack-plugin": "^2.0.1",
     "postcss-normalize": "^10.0.1",
     "prettier": "^2.8.4",
     "pretty-quick": "^3.1.3",
@@ -80,6 +83,8 @@
   "browserslist": {
     "production": [
       ">0.2%",
+      "not ie <= 99",
+      "not android <= 4.4.4",
       "not dead",
       "not op_mini all"
     ],

src/App.tsx

@@ -125,11 +125,7 @@ const App: React.FC = () => {
                         onClick={submitTx}
                         disabled={parsing || transfers.length + collectibleTransfers.length === 0}
                       >
-                        {parsing && (
-                          <>
-                            <CircularProgress size={24} color="primary" />
-                          </>
-                        )}
+                        {parsing && <CircularProgress size={24} color="primary" />}
                         {messages.length === 0 ? "Submit" : "Submit with errors"}
                       </Button>
                       <MessageSnackbar />