fix: fix hot update error #1071 (#1072)

web/.eslintrc

@@ -4,12 +4,18 @@
     "es6": true,
     "node": true
   },
-  "parser": "babel-eslint",
+  "parser": "@babel/eslint-parser",
   "parserOptions": {
     "ecmaVersion": 12,
     "sourceType": "module",
     "ecmaFeatures": {
       "jsx": true
+    },
+    "requireConfigFile": false,
+    "babelOptions": {
+      "babelrc": false,
+      "configFile": false,
+      "presets": ["@babel/preset-react"]
     }
   },
   "settings": {

web/babel.config.json

@@ -0,0 +1,17 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "edge": "17",
+          "firefox": "60",
+          "chrome": "67",
+          "safari": "11.1"
+        },
+        "useBuiltIns": "usage",
+        "corejs": "3.6.5"
+      }
+    ]
+  ]
+}

web/package.json

@@ -4,8 +4,8 @@
   "private": true,
   "dependencies": {
     "@ant-design/icons": "^4.7.0",
-    "@craco/craco": "^6.1.1",
-    "@crowdin/cli": "^3.6.4",
+    "@craco/craco": "^6.4.5",
+    "@crowdin/cli": "^3.7.10",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
@@ -13,7 +13,7 @@
     "codemirror": "^5.61.1",
     "copy-to-clipboard": "^3.3.1",
     "core-js": "^3.25.0",
-    "craco-less": "^1.17.1",
+    "craco-less": "^2.0.0",
     "eslint-plugin-unused-imports": "^2.0.0",
     "file-saver": "^2.0.5",
     "i18n-iso-countries": "^7.0.0",
@@ -31,7 +31,7 @@
     "react-highlight-words": "^0.18.0",
     "react-i18next": "^11.8.7",
     "react-router-dom": "^5.3.3",
-    "react-scripts": "4.0.3",
+    "react-scripts": "5.0.1",
     "react-social-login-buttons": "^3.4.0"
   },
   "scripts": {
@@ -61,9 +61,12 @@
     ]
   },
   "devDependencies": {
+    "@babel/core": "^7.18.13",
+    "@babel/eslint-parser": "^7.18.9",
+    "@babel/preset-react": "^7.18.6",
     "cross-env": "^7.0.3",
-    "eslint": "^7.11.0",
-    "eslint-plugin-react": "^7.30.1",
+    "eslint": "^8.23.0",
+    "eslint-plugin-react": "^7.31.1",
     "husky": "^4.3.8",
     "lint-staged": "^13.0.3"
   },

web/src/BaseListPage.js

@@ -39,101 +39,102 @@ class BaseListPage extends React.Component {
     this.fetch({pagination});
   }
 
-    getColumnSearchProps = dataIndex => ({
-      filterDropdown: ({setSelectedKeys, selectedKeys, confirm, clearFilters}) => (
-        <div style={{padding: 8}}>
-          <Input
-            ref={node => {
-              this.searchInput = node;
-            }}
-            placeholder={`Search ${dataIndex}`}
-            value={selectedKeys[0]}
-            onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
-            onPressEnter={() => this.handleSearch(selectedKeys, confirm, dataIndex)}
-            style={{marginBottom: 8, display: "block"}}
-          />
-          <Space>
-            <Button
-              type="primary"
-              onClick={() => this.handleSearch(selectedKeys, confirm, dataIndex)}
-              icon={<SearchOutlined />}
-              size="small"
-              style={{width: 90}}
-            >
+  getColumnSearchProps = dataIndex => ({
+    filterDropdown: ({setSelectedKeys, selectedKeys, confirm, clearFilters}) => (
+      <div style={{padding: 8}}>
+        <Input
+          ref={node => {
+            this.searchInput = node;
+          }}
+          placeholder={`Search ${dataIndex}`}
+          value={selectedKeys[0]}
+          onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
+          onPressEnter={() => this.handleSearch(selectedKeys, confirm, dataIndex)}
+          style={{marginBottom: 8, display: "block"}}
+        />
+
+        <Space>
+          <Button
+            type="primary"
+            onClick={() => this.handleSearch(selectedKeys, confirm, dataIndex)}
+            icon={<SearchOutlined />}
+            size="small"
+            style={{width: 90}}
+          >
                         Search
-            </Button>
-            <Button onClick={() => this.handleReset(clearFilters)} size="small" style={{width: 90}}>
+          </Button>
+          <Button onClick={() => this.handleReset(clearFilters)} size="small" style={{width: 90}}>
                         Reset
-            </Button>
-            <Button
-              type="link"
-              size="small"
-              onClick={() => {
-                confirm({closeDropdown: false});
-                this.setState({
-                  searchText: selectedKeys[0],
-                  searchedColumn: dataIndex,
-                });
-              }}
-            >
+          </Button>
+          <Button
+            type="link"
+            size="small"
+            onClick={() => {
+              confirm({closeDropdown: false});
+              this.setState({
+                searchText: selectedKeys[0],
+                searchedColumn: dataIndex,
+              });
+            }}
+          >
                         Filter
-            </Button>
-          </Space>
-        </div>
+          </Button>
+        </Space>
+      </div>
+    ),
+    filterIcon: filtered => <SearchOutlined style={{color: filtered ? "#1890ff" : undefined}} />,
+    onFilter: (value, record) =>
+      record[dataIndex]
+        ? record[dataIndex].toString().toLowerCase().includes(value.toLowerCase())
+        : "",
+    onFilterDropdownVisibleChange: visible => {
+      if (visible) {
+        setTimeout(() => this.searchInput.select(), 100);
+      }
+    },
+    render: text =>
+      this.state.searchedColumn === dataIndex ? (
+        <Highlighter
+          highlightStyle={{backgroundColor: "#ffc069", padding: 0}}
+          searchWords={[this.state.searchText]}
+          autoEscape
+          textToHighlight={text ? text.toString() : ""}
+        />
+      ) : (
+        text
       ),
-      filterIcon: filtered => <SearchOutlined style={{color: filtered ? "#1890ff" : undefined}} />,
-      onFilter: (value, record) =>
-        record[dataIndex]
-          ? record[dataIndex].toString().toLowerCase().includes(value.toLowerCase())
-          : "",
-      onFilterDropdownVisibleChange: visible => {
-        if (visible) {
-          setTimeout(() => this.searchInput.select(), 100);
-        }
-      },
-      render: text =>
-        this.state.searchedColumn === dataIndex ? (
-          <Highlighter
-            highlightStyle={{backgroundColor: "#ffc069", padding: 0}}
-            searchWords={[this.state.searchText]}
-            autoEscape
-            textToHighlight={text ? text.toString() : ""}
-          />
-        ) : (
-          text
-        ),
+  });
+
+  handleSearch = (selectedKeys, confirm, dataIndex) => {
+    this.fetch({searchText: selectedKeys[0], searchedColumn: dataIndex, pagination: this.state.pagination});
+  };
+
+  handleReset = clearFilters => {
+    clearFilters();
+    const {pagination} = this.state;
+    this.fetch({pagination});
+  };
+
+  handleTableChange = (pagination, filters, sorter) => {
+    this.fetch({
+      sortField: sorter.field,
+      sortOrder: sorter.order,
+      pagination,
+      ...filters,
+      searchText: this.state.searchText,
+      searchedColumn: this.state.searchedColumn,
     });
+  };
 
-    handleSearch = (selectedKeys, confirm, dataIndex) => {
-      this.fetch({searchText: selectedKeys[0], searchedColumn: dataIndex, pagination: this.state.pagination});
-    };
-
-    handleReset = clearFilters => {
-      clearFilters();
-      const {pagination} = this.state;
-      this.fetch({pagination});
-    };
-
-    handleTableChange = (pagination, filters, sorter) => {
-      this.fetch({
-        sortField: sorter.field,
-        sortOrder: sorter.order,
-        pagination,
-        ...filters,
-        searchText: this.state.searchText,
-        searchedColumn: this.state.searchedColumn,
-      });
-    };
-
-    render() {
-      return (
-        <div>
-          {
-            this.renderTable(this.state.data)
-          }
-        </div>
-      );
-    }
+  render() {
+    return (
+      <div>
+        {
+          this.renderTable(this.state.data)
+        }
+      </div>
+    );
+  }
 }
 
 export default BaseListPage;