React build crash using vite and react 18.2.0 #6838

giuseppealbrizio · 2022-11-29T17:02:30Z

[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

The text was updated successfully, but these errors were encountered:

google-oss-bot · 2022-11-29T17:02:32Z

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

hsubox76 · 2022-11-30T17:44:04Z

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 · 2022-11-30T18:13:22Z

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 · 2022-12-09T18:13:36Z

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 · 2022-12-14T19:16:07Z

Possibly related: #6887

google-oss-bot added the needs-triage label Nov 29, 2022

jbalidiong added api: core and removed needs-triage labels Nov 29, 2022

hsubox76 mentioned this issue Dec 9, 2022

Format comment containing process.env #6874

Merged

hsubox76 closed this as completed in #6874 Dec 21, 2022

google-oss-bot mentioned this issue Jan 17, 2023

Version Packages #6953

Merged

firebase locked and limited conversation to collaborators Jan 21, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

React build crash using vite and react 18.2.0 #6838

React build crash using vite and react 18.2.0 #6838

React build crash using vite and react 18.2.0 #6838

React build crash using vite and react 18.2.0 #6838

Comments

[REQUIRED] Describe your environment

[REQUIRED] Describe the problem

Steps to reproduce:

Relevant Code: