Ant design 4 does not work anymore after running npm install

Question

I encounter an error with antd 4.12.3 and react 17.0.2 since a new generation of my node_module.

I didn't have run npm install into my project since a long time, After having delete my node_modules, package-lock, clean-cache I run npm install, since then I have encountered lots of errors from antd I didn't change any version of any package in my package-json has ant made an update on his 4x version ? I don't know if i have to fix all the error by myself into the project or if i can fix it by updating/downgrading a package ? I also have a lot of css rules which no longer works I use react-app-rewired

Thanks

My package.json :

 "dependencies": {  
    "antd": "^4.12.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.1",
    "js-file-download": "^0.4.12",
    "aphrodite": "^2.4.0",
    "less": "^3.13.1",
    "axios": "^0.19.2",
    "bizcharts": "^4.1.7",
    "chroma-js": "^2.1.0",
    "connected-react-router": "^6.8.0",
    "exceljs": "^4.2.0",
    "file-saver": "^2.0.5",
    "highlight.js": "^10.6.0",
    "lodash": "^4.17.20",
    "jspdf": "^2.3.0",
    "jspdf-autotable": "^3.5.14",
    "localforage": "^1.9.0",
    "md5": "^2.3.0",
    "re-resizable": "^6.9.0",
    "react-base-table": "^1.12.0",
    "react-color": "^2.19.3",
    "react-helmet": "^6.1.0",
    "react-hotkeys-hook": "^2.4.1",
    "react-ionicons": "^4.2.1",
    "react-router-dom": "^5.2.0",
    "react-sortable-hoc": "^2.0.0",
    "react-transition-group": "^4.4.1",
    "redux": "^4.0.5",
    "redux-thunk": "^2.3.0",
    "slugify": "^1.4.6",
    "xml-js": "^1.6.11"
  },
  "scripts": {
    "start": "react-app-rewired start",
    "release": "standard-version --release-as patch",
    "release-as": "standard-version --release-as",
    "build": "node ./scripts/buildVersion.js && GENERATE_SOURCEMAP=false node node_modules/.bin/react-app-rewired --max_old_space_size=4096 build",
    "build-win": "node ./scripts/buildVersion.js && set \"GENERATE_SOURCEMAP=false\" && node node_modules/react-app-rewired/bin --max_old_space_size=4096 build",
    "test": "react-app-rewired test --watchAll",
    "eject": "react-app-rewired eject",
    "deploy": "bash ./scripts/ftp_send.sh",
    "server": "node-env-run server --exec nodemon",
    "dev": "run-p server start",
    "analyze": "source-map-explorer build/static/js/4.b01fcf9f.chunk.js"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "react-app-rewired": "^2.1.8",
    "less-loader": "^7.0.0",
    "antd-theme-generator": "^1.2.11",
    "antd-dayjs-webpack-plugin": "^1.0.6",
    "antd-theme-webpack-plugin": "^1.3.9",
    "babel-plugin-import": "^1.13.3",
    "customize-cra": "^1.0.0",
    "@hot-loader/react-dom": "^17.0.2"
    }

My config-overides.js :

const path = require("path");
const fs = require("fs");
const {
  override,
  fixBabelImports,
  addLessLoader,
  addWebpackPlugin,
  addWebpackAlias,
} = require("customize-cra");
const { getThemeVariables } = require("antd/dist/theme");
const AntDesignThemePlugin = require("antd-theme-webpack-plugin");
const AntdDayjsWebpackPlugin = require("antd-dayjs-webpack-plugin");

const { getLessVars } = require("antd-theme-generator");

const defaultVars = getLessVars(
  "./node_modules/antd/lib/style/themes/default.less"
);

//CTI custom common variables
const themeVariables = getLessVars(
  path.join(__dirname, "./src/styles/_variables.less")
);

//Default dark vars mixed with custom CTI dark colors
const darkVars = {
  ...getLessVars("./node_modules/antd/lib/style/themes/dark.less"),
  "@primary-color": defaultVars["@primary-color"],
  ...getLessVars(path.join(__dirname, "./src/styles/themes/_darkVariables.less")),
};

//Default light vars mixed with custom CTI light vars
const lightVars = {
  ...getLessVars("./node_modules/antd/lib/style/themes/compact.less"),
  "@primary-color": defaultVars["@primary-color"],
  ...getLessVars(path.join(__dirname, "./src/styles/themes/_lightVariables.less")),
};

//Write mixed vars in JSON files (used to dynamically)
fs.writeFileSync("./src/dark.json", JSON.stringify(darkVars));
fs.writeFileSync("./src/light.json", JSON.stringify(lightVars));
fs.writeFileSync("./src/theme.json", JSON.stringify(themeVariables));

const options = {
  stylesDir: path.join(__dirname, "./src"),
  antDir: path.join(__dirname, "./node_modules/antd"),
  varFile: path.join(__dirname, "./src/styles/_variables.less"),
  themeVariables: Array.from(
    new Set([
      ...Object.keys(darkVars),
      ...Object.keys(lightVars),
      ...Object.keys(themeVariables),
    ])
  ),
  generateOnce: true, // generate color.less on each compilation
};

module.exports = override(
  fixBabelImports("import", {
    libraryName: "antd",
    libraryDirectory: "es",
    style: true,
  }),
  addWebpackAlias({
    ['@components']: path.resolve(__dirname, './src/components'),
    ['@helpers']: path.resolve(__dirname, './src/helpers'),
    ['@adapters']: path.resolve(__dirname, './src/helpers/adapters'),
    ['@api']: path.resolve(__dirname, './src/services/api'),
    ['@formatter']: path.resolve(__dirname, './src/helpers/formatter'),
    ['@localForage']: path.resolve(__dirname, './src/helpers/localForage'),
    ['@template']: path.resolve(__dirname, './src/helpers/template'),
    ['@utils']: path.resolve(__dirname, './src/helpers/utils'),
    ['@styles']: path.resolve(__dirname, './src/styles'),
    ['@actions']: path.resolve(__dirname, './src/redux/actions'),
    ['@reducers']: path.resolve(__dirname, './src/redux/reducers'),
    ['@redux']: path.resolve(__dirname, './src/redux/'),
    ['@dark']: path.resolve(__dirname, './src/dark.json'),
    ['@light']: path.resolve(__dirname, './src/light.json'),
    ['@Content']: path.resolve(__dirname, './src/components/Content'),
    ['@charts']: path.resolve(__dirname, './src/components/charts'),
    ['@Page']: path.resolve(__dirname, './src/components/Page'),
    ['@Settings']: path.resolve(__dirname, './src/components/Settings'),
    ['@shared']: path.resolve(__dirname, './src/components/shared'),
    ['@View']: path.resolve(__dirname, './src/components/View'),
    ['@services']: path.resolve(__dirname, './src/services'),
    ['@requests']: path.resolve(__dirname, './src/services/requests'),
  }),
  addWebpackPlugin(new AntDesignThemePlugin(options)),
  addWebpackPlugin(new AntdDayjsWebpackPlugin()),
  addLessLoader({
    lessOptions: {
      javascriptEnabled: true,
      modifyVars: {
        ...getThemeVariables({
          compact: true,
        }),
      },
    },
  })
);

Js error Js error

I tried to downgrad or upgrade ant version I tried to load one old package.json who was working and i encounter the same error I tried to load a old stable version and reload the node module and encounter the same error I tried to fix error manually, but there is a lot of error, like if i was having upgrade to ant 5x