React build crash using vite and react 18.2.0

[giuseppealbrizio]

[REQUIRED] Describe your environment

• Operating System version: MacOS 13.0.1 (22A400)
• Browser version: Chrome Version 107.0.5304.110 (Official Build) (arm64)
• Firebase SDK version: 9.14.00
• Firebase Product: app (auth, database, storage, etc)

[REQUIRED] Describe the problem

Starting from version 9.11.0 Vite build command fails. To avoid this issue need to rollup the firebase version to 9.10.0

Steps to reproduce:

Relevant Code:

console output

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.

package.json

  "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"
    ]

VITE config file

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()]
      }
    }
  })
}

// TODO(you): code here to reproduce the problem

[google-oss-bot]

I couldn't figure out how to label this issue, so I've labeled it for a human to triage. Hang tight.

[hsubox76]

Would you be able to provide a minimal repro? I think I need to dig around and debug it, and I'm not familiar with setting up a new Vite/React project, so it might take some time to get that up and running, unless you can provide a minimal repro.

The thing is that the compiler is pointing to a place in the middle of the comment so I think the source map must be off by a few lines, because that is probably the correct file (it's recently added) but it's probably the actual code in the file that is the problem. If I can get my hands on a running project then I can probably mess around in the dist file and identify what line it's having a problem with.

Or if you want to try something yourself, you can go into node_modules/@firebase/util/dist/index.esm2017.js, find that comment and delete it, and see if anything changes. (Perhaps there's a weird whitespace character or something? Maybe there's something about putting process.env in a comment?)

[giuseppealbrizio]

Would you be able to provide a minimal repro? I think I need to dig around and debug it, and I'm not familiar with setting up a new Vite/React project, so it might take some time to get that up and running, unless you can provide a minimal repro.

The thing is that the compiler is pointing to a place in the middle of the comment so I think the source map must be off by a few lines, because that is probably the correct file (it's recently added) but it's probably the actual code in the file that is the problem. If I can get my hands on a running project then I can probably mess around in the dist file and identify what line it's having a problem with.

Or if you want to try something yourself, you can go into node_modules/@firebase/util/dist/index.esm2017.js, find that comment and delete it, and see if anything changes. (Perhaps there's a weird whitespace character or something? Maybe there's something about putting process.env in a comment?)

Yes just checked in the node_modules/@firebase/util/dist/index.esm2017.js and seems that the comment at line 642-646 creates some issue in the build process of Vite. It's something related with putting process.env in the comment. I'll open an issue into the Vite repo just to check with them this issue.

/**
 * Attempt to read defaults from a JSON string provided to
 * process.env.__FIREBASE_DEFAULTS__ or a
 * process.env.__FIREBASE_DEFAULTS_PATH__
 */

Deleted this comment and the build command goes smooth.

Thank you

[hsubox76]

Oh thanks so much, I'll make a PR to reformat that comment in the meantime. It might take a while to get released since we are not planning on another release before the end of the year.

[jwalton]

Possibly related: #6887