React项目无法安装Node依赖及构建问题求助

我在尝试安装Node依赖并构建名为sample-react的React项目时接连遇到问题：

1. 依赖树解析错误 #

首先出现以下依赖冲突报错：

unable to resolve dependency tree
npm ERR! Found: react-dnd@9.5.1
npm ERR! node_modules/react-dnd
npm ERR!   react-dnd@"^9.4.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react-dnd@">= 2.0.0 < 3.0.0" from reactabular-dnd@8.16.0

项目中涉及冲突的包版本为：

"reactabular-dnd": "^8.16.0",
"react-dnd": "^9.4.0",

2. 构建阶段报错 #

使用npm install --legacy-peer-deps成功安装依赖后，运行npm run build时出现新的报错，错误截图如下：

项目完整package.json配置 #

{
  "name": "sample-react",
  "description": "Sample Website",
  "version": "2.0.0",
  "keywords": [
    "xxxx"
  ],
  "repository": {
    "type": "git"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "watch": "cra-build-watch --verbose -p /"
  },
  "dependencies": {
    "@okta/okta-auth-js": "^5.5.0",
    "axios": "^0.21.0",
    "bootstrap": "^3.3.7",
    "bootstrap-select": "^1.13.12",
    "classnames": "^2.2.6",
    "connected-react-router": "^6.5.2",
    "core-js": "^3.8.1",
    "date-fns": "^2.4.1",
    "debounce-promise": "^3.1.2",
    "font-awesome": "^4.6.3",
    "formik": "^2.2.6",
    "immutable": "^4.0.0-rc.12",
    "jquery": "^3.5.1",
    "lodash": "^4.17.15",
    "lodash.debounce": "^4.0.8",
    "luxon": "^1.25.0",
    "match-sorter": "^4.0.1",
    "moment": "^2.24.0",
    "numeral": "^2.0.6",
    "prop-types": "^15.7.2",
    "qs": "^6.9.4",
    "react": "^16.13.0",
    "react-app-polyfill": "^2.0.0",
    "react-block-ui": "^1.3.1",
    "react-bootstrap": "^0.33.1",
    "react-datepicker": "^2.9.6",
    "react-dnd": "^9.4.0",
    "react-dnd-html5-backend": "^9.4.0",
    "react-dom": "^16.13.0",
    "react-file-download": "^0.3.5",
    "react-input-mask": "2.0.4",
    "react-number-format": "^4.4.4",
    "react-overlays": "^1.2.0",
    "react-paginate": "^6.3.0",
    "react-redux": "^7.1.1",
    "react-redux-toastr": "^7.5.1",
    "react-router-bootstrap": "^0.25.0",
    "react-router-dom": "^5.1.0",
    "react-scripts": "^4.0.1",
    "react-select": "^3.1.1",
    "react-table": "^6.10.3",
    "react-table-6": "^6.11.0",
    "reactabular-column-extensions": "^8.9.3",
    "reactabular-dnd": "^8.16.0",
    "reactabular-table": "^8.14.0",
    "redux": "^4.0.4",
    "redux-form": "^8.2.6",
    "redux-thunk": "^2.3.0",
    "sortabular": "^1.6.0",
    "table-resolver": "^4.1.1",
    "use-latest": "^1.2.0",
    "validatorjs": "^3.17.1",
    "yup": "^0.32.8"
  },
  "devDependencies": {
    "cra-build-watch": "^3.2.0"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "ie 11",
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

内容的提问来源于stack exchange，提问作者Mahesh