React build crash using vite and react 18.2.0 #6838

vite v3.2.4 building for production...
[commonjs--resolver] Unexpected token (644:1715) in /<directory>/node_modules/@firebase/util/dist/index.esm2017.js
642: /**
643:  * Attempt to read defaults from a JSON string provided to
644:  * process.env.__FIREBASE_DEFAULTS__ or a JSON file whose path is in
                                                                          ^
645:  * process.env.__FIREBASE_DEFAULTS_PATH__
646:  */

error during build:
SyntaxError: Unexpected token (644:1715) in /<directory>/node_modules/@firebase/util/dist/index.esm2017.js
    at pp$4.raise (file:///<directory>/node_modules/rollup/dist/es/shared/rollup.js:19420:13)
    at pp$9.unexpected (file:///<directory>/node_modules/rollup/dist/es/shared/rollup.js:16714:8)
    at pp$5.parseExprAtom (file:///<directory>/node_modules/rollup/dist/es/shared/rollup.js:18795:10)
    at pp$5.parseExprSubscripts (file:///<directory>/node_modules/rollup/dist/es/shared/rollup.js:18587:19)
    at pp$5.parseMaybeUnary (file:///<directory>/node_modules/rollup/dist/es/shared/rollup.js:18553:17)
    at pp$5.parseExprOps (file:///<directory>/node_modules/rollup/dist/es/shared/rollup.js:18480:19)
    at pp$5.parseMaybeConditional (file:///<directory>/node_modules/rollup/dist/es/shared/rollup.js:18463:19)
    at pp$5.parseMaybeAssign (file:///<directory>/node_modules/rollup/dist/es/shared/rollup.js:18430:19)
    at pp$5.parseExpression (file:///<directory>/node_modules/rollup/dist/es/shared/rollup.js:18393:19)
    at pp$8.parseStatement (file:///<directory>/node_modules/rollup/dist/es/shared/rollup.js:16904:45)
    at pp$8.parseTopLevel (file:///<directory>/node_modules/rollup/dist/es/shared/rollup.js:16771:21)
    at Parser.parse (file:///<directory>/node_modules/rollup/dist/es/shared/rollup.js:16543:15)
    at Function.parse (file:///<directory>/node_modules/rollup/dist/es/shared/rollup.js:16593:35)
    at Graph.contextParse (file:///<directory>/node_modules/rollup/dist/es/shared/rollup.js:22959:38)
    at tryParse (file:///<directory>/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:7213:12)
    at analyzeTopLevelStatements (file:///<directory>node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:7232:15)
    at Object.transformAndCheckExports (file:///<directory>node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:9222:68)
    at Object.transform (file:///<directory>/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:9413:41)
    at file:///<directory>/node_modules/rollup/dist/es/shared/rollup.js:22748:40
error Command failed with exit code 1.

  "dependencies": {
    "@casl/ability": "^5.2.2",
    "@casl/react": "^2.1.1",
    "@esbuild-plugins/node-globals-polyfill": "0.1.1",
    "@fullcalendar/core": "^5.11.0",
    "@fullcalendar/daygrid": "^5.11.0",
    "@fullcalendar/interaction": "^5.11.0",
    "@fullcalendar/list": "^5.11.0",
    "@fullcalendar/react": "^5.11.1",
    "@fullcalendar/timegrid": "^5.11.0",
    "@fullcalendar/timeline": "^5.11.0",
    "@hookform/resolvers": "^2.8.10",
    "@popperjs/core": "^2.11.3",
    "@react-pdf/renderer": "^3.0.1",
    "@reduxjs/toolkit": "^1.2.5",
    "animate.css": "^4.1.1",
    "apexcharts": "^3.35.2",
    "apexcharts-clevision": "^3.28.5",
    "axios": "^1.1.3",
    "axios-mock-adapter": "^1.20.0",
    "bootstrap": "^5.2.2",
    "bs-stepper": "^1.7.0",
    "buffer": "^6.0.3",
    "chart.js": "^4.0.1",
    "chroma-js": "^2.4.2",
    "classnames": "^2.3.2",
    "cleave.js": "1.6.0",
    "connected-react-router": "^6.9.2",
    "crypto-browserify": "3.12.0",
    "currency.js": "^2.0.4",
    "draft-js": "0.11.7",
    "draftjs-to-html": "0.9.1",
    "events": "3.3.0",
    "file-saver": "^2.0.5",
    "firebase": "9.10.0",
    "flatpickr": "^4.6.13",
    "history": "^5.3.0",
    "html-to-draftjs": "^1.5.0",
    "i18next": "^22.0.5",
    "i18next-browser-languagedetector": "^7.0.1",
    "i18next-http-backend": "^2.0.2",
    "jquery": "^3.5.1",
    "jsonwebtoken": "~8.5.1",
    "lodash": "^4.17.21",
    "moment": "^2.29.1",
    "nouislider": "^15.5.0",
    "nouislider-react": "^3.3.8",
    "postcss": "7.0.33",
    "postcss-custom-properties": "^12.1.10",
    "postcss-import": "12.0.0",
    "postcss-rtl": "^1.5.0",
    "prismjs": "^1.19.0",
    "process": "^0.11.10",
    "rc-input-number": "^7.3.11",
    "react": "^18.2.0",
    "react-apexcharts": "^1.4.0",
    "react-chartjs-2": "^5.0.1",
    "react-copy-to-clipboard": "^5.1.0",
    "react-country-flag": "^3.0.2",
    "react-data-table-component": "^7.5.2",
    "react-dom": "^18.2.0",
    "react-draft-wysiwyg": "^1.14.7",
    "react-dropzone": "^14.2.1",
    "react-feather": "~2.0.3",
    "react-flatpickr": "^3.10.12",
    "react-google-autocomplete": "^2.6.1",
    "react-hook-form": "^7.39.4",
    "react-hot-toast": "^2.4.0",
    "react-i18next": "^12.0.0",
    "react-image-file-resizer": "^0.4.7",
    "react-paginate": "^8.1.3",
    "react-perfect-scrollbar": "^1.5.8",
    "react-popper": "^2.3.0",
    "react-rating": "2.0.5",
    "react-redux": "^8.0.1",
    "react-router-dom": "^6.3.0",
    "react-select": "^5.6.1",
    "react-shepherd": "^4.1.0",
    "react-slidedown": "^2.4.7",
    "react-sortablejs": "6.0.0",
    "react-toastify": "^9.0.1",
    "reactstrap": "^9.1.5",
    "recharts": "^2.0.4",
    "redux": "^4.2.0",
    "redux-debounced": "0.5.0",
    "redux-persist": "^6.0.0",
    "redux-thunk": "^2.4.1",
    "rollup-plugin-node-polyfills": "0.2.1",
    "sass": "^1.51.0",
    "screenfull": "^6.0.2",
    "sortablejs": "^1.12.0",
    "stream-browserify": "^3.0.0",
    "styled-components": "^5.3.5",
    "sweetalert2": "^11.1.9",
    "sweetalert2-react-content": "^5.0.0",
    "swiper": "^8.0.7",
    "wnumb": "^1.2.0",
    "xlsx": "^0.18.2",
    "yarn": "^1.21.1",
    "yup": "^0.32.11"
  },
  "scripts": {
    "start": "NODE_OPTIONS=--openssl-legacy-provider vite",
    "start:client": "NODE_OPTIONS=--openssl-legacy-provider vite",
    "build": "NODE_OPTIONS=--openssl-legacy-provider vite build",
    "preview": "vite preview",
    "format": "prettier --write \"src/**/*.js\"",
    "lint": "eslint src/**/*.js src/**/*.js",
    "lint:fix": "eslint src/**/*.js --fix"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "devDependencies": {
    "@babel/core": "^7.18.6",
    "@babel/eslint-parser": "^7.18.2",
    "@babel/preset-react": "^7.18.6",
    "@types/sortablejs": "^1.10.6",
    "@vitejs/plugin-react": "2.2.0",
    "eslint": "^8.19.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-react": "^7.29.4",
    "prettier": "^2.6.2",
    "sass-loader": "^13.1.0",
    "vite": "^3.2.4"
  },
  "resolutions": {
    "sass-loader/webpack": "^5.0.0",
    "recharts/prop-types": "^15.6.0",
    "styled-components/react-is": "^16.8.0",
    "react-hot-toast/goober/csstype": "^3.0.10",
    "html-to-draftjs/immutable": "^4.0.0",
    "postcss-custom-properties/postcss": "^8.2",
    "@esbuild-plugins/node-globals-polyfill/esbuild": "^0.15.15"
  },
"overrides": {
    "sass-loader": {
      "webpack": "^5.0.0"
    },
    "recharts": {
      "prop-types": "^15.6.0"
    },
    "styled-components": {
      "react-is": "^16.8.0"
    },
    "react-hot-toast": {
      "goober": {
        "csstype": "^3.0.10"
      }
    },
    "html-to-draftjs": {
      "immutable": "^4.0.0"
    },
    "postcss-custom-properties": {
      "postcss": "^8.2"
    },
    "@esbuild-plugins/node-globals-polyfill": {
      "esbuild": "^0.15.15"
    }
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]

import fs from 'fs'
import * as path from 'path'
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import rollupNodePolyFill from 'rollup-plugin-node-polyfills'
import NodeGlobalsPolyfillPlugin from '@esbuild-plugins/node-globals-polyfill'

export default () => {
  return defineConfig({
    plugins: [react()],
    define: {
      global: 'globalThis',
      'process.env': process.env
    },
    server: {
      port: 3000,
      proxy: 'https://proxysite.com/',
      cors: {
        origin: ['https://proxysite.com/', 'http://localhost:3000'],
        methods: ['GET', 'PATCH', 'PUT', 'POST', 'DELETE', 'OPTIONS'],
        allowedHeaders: ['Content-Type', 'Authorization', 'X-Requested-With']
      }
    },
    css: {
      preprocessorOptions: {
        scss: {
          includePaths: ['node_modules', './src/assets']
        }
      },
      postcss: {
        plugins: [require('postcss-rtl')()]
      }
    },
    resolve: {
      alias: [
        {
          find: /^~.+/,
          replacement: val => {
            return val.replace(/^~/, '')
          }
        },
        { find: 'stream', replacement: 'stream-browserify' },
        { find: 'crypto', replacement: 'crypto-browserify' },
        { find: '@src', replacement: path.resolve(__dirname, 'src') },
        { find: '@store', replacement: path.resolve(__dirname, 'src/redux') },
        {
          find: '@configs',
          replacement: path.resolve(__dirname, 'src/configs')
        },
        {
          find: 'url',
          replacement: 'rollup-plugin-node-polyfills/polyfills/url'
        },
        {
          find: '@styles',
          replacement: path.resolve(__dirname, 'src/@core/scss')
        },
        {
          find: 'util',
          replacement: 'rollup-plugin-node-polyfills/polyfills/util'
        },
        {
          find: 'zlib',
          replacement: 'rollup-plugin-node-polyfills/polyfills/zlib'
        },
        {
          find: '@utils',
          replacement: path.resolve(__dirname, 'src/utility/Utils')
        },
        {
          find: '@hooks',
          replacement: path.resolve(__dirname, 'src/utility/hooks')
        },
        {
          find: '@assets',
          replacement: path.resolve(__dirname, 'src/@core/assets')
        },
        {
          find: '@layouts',
          replacement: path.resolve(__dirname, 'src/@core/layouts')
        },
        {
          find: 'assert',
          replacement: 'rollup-plugin-node-polyfills/polyfills/assert'
        },
        {
          find: 'buffer',
          replacement: 'rollup-plugin-node-polyfills/polyfills/buffer-es6'
        },
        {
          find: 'process',
          replacement: 'rollup-plugin-node-polyfills/polyfills/process-es6'
        },
        {
          find: '@components',
          replacement: path.resolve(__dirname, 'src/@core/components')
        }
      ]
    },
    esbuild: {
      loader: 'jsx',
      include: /.\/src\/.*\.js?$/,
      exclude: [],
      jsx: 'automatic'
    },
    optimizeDeps: {
      esbuildOptions: {
        loader: {
          '.js': 'jsx'
        },
        plugins: [
          NodeGlobalsPolyfillPlugin({
            buffer: true,
            process: true
          }),
          {
            name: 'load-js-files-as-jsx',
            setup(build) {
              build.onLoad({ filter: /src\\.*\.js$/ }, async args => ({
                loader: 'jsx',
                contents: await fs.readFileSync(args.path, 'utf8')
              }))
            }
          }
        ]
      }
    },
    build: {
      rollupOptions: {
        plugins: [rollupNodePolyFill()]
      }
    }
  })
}