Throws an error on compilation (Module parse failed: Unexpected token (83:4))

[gotitthanks]

Operating System

Windows 11 Pro 22H2 22621.1848

Browser Version

Electron React (Chromium) or Chrome

Firebase SDK Version

9.23.0

Firebase SDK Product:

Messaging

Describe your project's tooling

node -v 16.16.0
yarn -v 1.22.11

Describe the problem

Getting error while build

./node_modules/idb/build/index.js
Module parse failed: Unexpected token (83:4)
You may need an appropriate loader to handle this file type.
| }
| replaceTraps((oldTraps) => ({
|     ...oldTraps,
|     get: (target, prop, receiver) => getMethod(target, prop) || oldTraps.get(target, prop, receiver),
|     has: (target, prop) => !!getMethod(target, prop) || oldTraps.has(target, prop),

After yarn add idb (v7.1.1)
Error change

./node_modules/@firebase/messaging/node_modules/idb/build/index.js
Module parse failed: Unexpected token (83:4)
You may need an appropriate loader to handle this file type.
| }
| replaceTraps((oldTraps) => ({
|     ...oldTraps,
|     get: (target, prop, receiver) => getMethod(target, prop) || oldTraps.get(target, prop, receiver),
|     has: (target, prop) => !!getMethod(target, prop) || oldTraps.has(target, prop),

Steps and code to reproduce issue

yarn install , yarn build

package json

{
  "name": "react-electron",
  "version": "1619680823496.0.0",
  "private": true,
  "author": "react-electron",
  "main": "public/electron.js",
  "description": "Electron sitting in a tree",
  "homepage": "./",
  "dependencies": {
    "@ant-design/icons": "^4.5.0",
    "@material-ui/core": "^4.11.0",
    "@material-ui/icons": "^4.9.1",
    "@react-oauth/google": "file:./custom_modules/@react-oauth/google",
    "@twilio/voice-sdk": "^2.3.2",
    "antd": "^4.15.5",
    "axios": "^0.21.1",
    "axios-progress-bar": "^1.2.0",
    "bootstrap": "^4.4.1",
    "concurrently": "4.1.2",
    "country-data": "0.0.31",
    "cross-env": "6.0.2",
    "crypto-js": "^4.0.0",
    "draft-js": "^0.11.7",
    "draftjs-to-html": "^0.9.1",
    "electron-is-dev": "1.1.0",
    "electron-log": "^3.0.8",
    "electron-packager": "^14.2.1",
    "electron-push-receiver": "^2.1.3",
    "electron-wix-msi": "^3.0.6",
    "firebase": "^9.23.0",
    "google-libphonenumber": "^3.2.32",
    "idb": "^7.1.1",
    "jssip": "^3.7.5",
    "ldclient-js": "^2.10.2",
    "libphonenumber-js": "^1.9.16",
    "lodash": "^4.17.15",
    "moment": "^2.29.4",
    "moment-duration-format": "^2.3.2",
    "moment-timezone": "^0.5.27",
    "pusher-js": "^6.0.3",
    "query-string": "^7.0.0",
    "rage-edit": "^1.2.0",
    "react": "^16.8.0",
    "react-bootstrap": "^1.0.0-beta.16",
    "react-clear-cache": "^1.1.0",
    "react-cookies": "^0.1.1",
    "react-debounce-input": "^3.2.2",
    "react-dom": "^16.8.0",
    "react-draft-wysiwyg": "^1.14.5",
    "react-flag-icon-css": "^1.0.25",
    "react-google-login": "^5.2.2",
    "react-google-recaptcha": "^2.1.0",
    "react-h5-audio-player": "^2.4.1",
    "react-infinite-scroll-component": "^5.0.4",
    "react-intl-tel-input": "^8.0.1",
    "react-linkify": "^1.0.0-alpha",
    "react-phone-input-2": "^2.15.0",
    "react-phone-number-input": "^3.0.21",
    "react-redux": "^5.0.7",
    "react-router-dom": "4.3.1",
    "react-router-redux": "^4.0.8",
    "react-scripts": "1.1.2",
    "react-switch": "^5.0.1",
    "react-tagify": "^0.1.3",
    "react-toggle-switch": "^3.0.4",
    "reactjs-tag-input": "^2.0.13",
    "redux": "^3.7.2",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.2.0",
    "save-dev": "0.0.1-security",
    "serviceworker-webpack-plugin": "^0.2.3",
    "socket.io-client": "^2.3.0",
    "update-electron-app": "^1.2.0",
    "yarn": "^1.22.11"
  },
  "devDependencies": {
    "concurrently": "4.1.2",
    "electron": "6.0.11",
    "electron-builder": "^21.2.0",
    "prettier": "^1.4.4",
    "renamer": "^2.0.1",
    "replace-in-file": "^6.2.0",
    "wait-on": "3.3.0"
  },
  "build": {
    "appId": "react-electron",
    "win": {
      "target": [
        "nsis"
      ],
      "icon": "icon.ico",
      "requestedExecutionLevel": "requireAdministrator"
    },
    "nsis": {
      "installerIcon": "icon.ico",
      "uninstallerIcon": "icon.ico",
      "uninstallDisplayName": "react-electron",
      "license": "license.txt",
      "oneClick": false,
      "allowToChangeInstallationDirectory": true
    }
  },
  "files": [
    "*.js",
    "build",
    "node_modules"
  ],
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build && npm run build-rename",
    "build-rename": "npm run build-rename-js && npm run build-rename-css && npm run build-fix-index-js && npm run build-fix-index-css",
    "build-rename-js": "mv -v build/static/js/main.*.js build/static/js/main.js",
    "build-rename-css": "mv -v build/static/css/main.*.css build/static/css/main.css",
    "build-fix-index-js": "replace-in-file \"/main\\.[^\\.]+\\.js/i\" \"main.js\" build/index.html --isRegex",
    "build-fix-index-css": "replace-in-file \"/main\\.[^\\.]+\\.css/i\" \"main.css\" build/index.html --isRegex",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "electron-build": "electron-builder",
    "package-mac": "electron-packager . --overwrite --platform=darwin --arch=x64 --icon=assets/icons/mac/icon.icns --prune=true --out=release-builds",
    "package-win": "electron-packager . --overwrite --asar=true --platform=win32 --arch=ia32 --icon=assets/icons/win/icon.ico --prune=true --out=release-builds --version-string.CompanyName=CE --version-string.FileDescription=CE --version-string.ProductName=\"react-electron\"",
    "package-linux": "electron-packager . --overwrite --platform=linux --arch=x64 --icon=assets/icons/png/icon.png --prune=true --out=release-builds",
    "build-installer": "node public/build-installer.js",
    "electron-start": "electron public/electron.js",
    "generate-build-version": "node ./update-build.js",
    "prebuild": "npm run generate-build-version"
  },
  "buildDate": 1687694182759
}

import { initializeApp } from "firebase/app";
import { getMessaging, getToken } from "firebase/messaging";

export function initializePush() {

  const firebaseConfig = {
    apiKey: `**********`,
    authDomain: `**********`,
    databaseURL: `**********`,
    projectId: `**********`,
    storageBucket: `**********`,
    messagingSenderId: `**********`,
    appId: `**********`
  };

  // Initialize Firebase
  const app = initializeApp(firebaseConfig);

  // Initialize Firebase Cloud Messaging and get a reference to the service
  const messaging = getMessaging(app);

  // Add the public key generated from the console here.
  getToken(messaging, { vapidKey: '****************************************************************************' }).then((currentToken) => {
    if (currentToken) {
      console.log("currentToken:", currentToken)
      // Send the token to your server and update the UI if necessary
      // ...
    } else {
      // Show permission request UI
      console.log('No registration token available. Request permission to generate one.');
      // ...
    }
  }).catch((err) => {
    console.log('An error occurred while retrieving token. ', err);
    // ...
  });
}

[jbalidiong]

Hi @NehalJadav, thanks for reaching out. I tried replicating, but I wasn't able to reproduce the error. Would it be okay if you could provide me with an MCVE that I can run locally, so I can have a better look into it.

[martian-solutions]

Hello,

I just found this issue because I am also encountering this error. I set up a new Vue+Webpack JS project, added the Firebase SDK, and added one line to the auto-generated default source file (src/main.js).

Complete reproducible example (host is Ubuntu 22.04 LTS):

docker run -it node /bin/bash
npm install -g vue-cli; cd; vue init webpack-simple test; cd test; npm install; npm install firebase
# accept all defaults in above
echo 'import { initializeApp } from "firebase/app";' >> src/main.js
npm run dev

Example session:

-> % docker run -it node /bin/bash
root@ca44d429f630:/# npm install -g vue-cli; cd; vue init webpack-simple test; cd test; npm install; npm install firebase
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated consolidate@0.14.5: Please upgrade to consolidate v1.0.0+ as it has been modernized with several long-awaited fixes implemented. Maintenance is supported by Forward Email at https://forwardemail.net ; follow/watch https://github.com/ladjs/consolidate for updates and release changelog
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
npm WARN deprecated vue-cli@2.9.6: This package has been deprecated in favour of @vue/cli

added 233 packages in 4s

11 packages are looking for funding
  run `npm fund` for details
npm notice
npm notice New minor version of npm available! 9.6.7 -> 9.7.2
npm notice Changelog: https://github.com/npm/cli/releases/tag/v9.7.2
npm notice Run npm install -g npm@9.7.2 to update!
npm notice

? Project name test
? Project description A Vue.js project
? Author
? License MIT
? Use sass? No

   vue-cli · Generated "test".

   To get started:

     cd test
     npm install
     npm run dev

npm WARN deprecated acorn-dynamic-import@2.0.2: This is probably built in to whatever tool you're using. If you still need it... idk
npm WARN deprecated consolidate@0.14.5: Please upgrade to consolidate v1.0.0+ as it has been modernized with several long-awaited fixes implemented. Maintenance is supported by Forward Email at https://forwardemail.net ; follow/watch https://github.com/ladjs/consolidate for updates and release changelog
npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated flatten@1.0.3: flatten is deprecated in favor of utility frameworks such as lodash.
npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
npm WARN deprecated chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
npm WARN deprecated svgo@0.7.2: This SVGO version is no longer supported. Upgrade to v2.x.x.
npm WARN deprecated core-js@2.6.12: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.

added 883 packages, and audited 884 packages in 11s

68 packages are looking for funding
  run `npm fund` for details

70 vulnerabilities (1 low, 49 moderate, 17 high, 3 critical)

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

added 99 packages, and audited 983 packages in 7s

70 packages are looking for funding
  run `npm fund` for details

70 vulnerabilities (1 low, 49 moderate, 17 high, 3 critical)

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.
root@ca44d429f630:~/test# echo 'import { initializeApp } from "firebase/app";' >> src/main.js
root@ca44d429f630:~/test# npm run dev

> test@1.0.0 dev
> cross-env NODE_ENV=development webpack-dev-server --open --hot

(node:324) [DEP0111] DeprecationWarning: Access to process.binding('http_parser') is deprecated.
(Use `node --trace-deprecation ...` to show where the warning was created)
Project is running at http://localhost:8080/
webpack output is served from /dist/
404s will fallback to /index.html
Unable to open browser. If you are running in a headless environment, please do not use the open flag.
{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
Hash: 456ddbdb51fdcbb88112
Version: webpack 3.12.0
Time: 930ms
                                    Asset     Size  Chunks                    Chunk Names
logo.png?82b9c7a5a3f405032b1db71a25f67021  6.85 kB          [emitted]
                                 build.js  2.68 MB       0  [emitted]  [big]  main
   [5] (webpack)/hot/log.js 1.04 kB {0} [built]
  [10] (webpack)/hot/emitter.js 77 bytes {0} [built]
  [11] ./node_modules/vue/dist/vue.esm.js 418 kB {0} [built]
  [15] multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js 52 bytes {0} [built]
  [16] (webpack)-dev-server/client?http://localhost:8080 7.93 kB {0} [built]
  [17] ./node_modules/url/url.js 23.5 kB {0} [built]
  [33] ./node_modules/strip-ansi/index.js 161 bytes {0} [built]
  [35] ./node_modules/loglevel/lib/loglevel.js 9.56 kB {0} [built]
  [36] (webpack)-dev-server/client/socket.js 1.08 kB {0} [built]
  [38] (webpack)-dev-server/client/overlay.js 3.67 kB {0} [built]
  [44] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {0} [built]
  [46] (webpack)/hot/dev-server.js 1.61 kB {0} [built]
  [47] (webpack)/hot/log-apply-result.js 1.31 kB {0} [built]
  [48] ./src/main.js 180 bytes {0} [built]
  [51] ./src/App.vue 1.81 kB {0} [built]
    + 48 hidden modules

ERROR in ./node_modules/idb/build/index.js
Module parse failed: Unexpected token (90:4)
You may need an appropriate loader to handle this file type.
| }
| replaceTraps((oldTraps) => ({
|     ...oldTraps,
|     get: (target, prop, receiver) => getMethod(target, prop) || oldTraps.get(target, prop, receiver),
|     has: (target, prop) => !!getMethod(target, prop) || oldTraps.has(target, prop),
 @ ./node_modules/@firebase/app/dist/esm/index.esm2017.js 5:0-29
 @ ./node_modules/firebase/app/dist/esm/index.esm.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js
^C
root@ca44d429f630:~/test# node -v
v20.3.1
root@ca44d429f630:~/test# npm -v
9.6.7
^D
-> % docker images node
REPOSITORY   TAG       IMAGE ID       CREATED      SIZE
node         latest    929e12cf091f   7 days ago   1.1GB

Also note that using modern @vue/cli to create the project instead of the deprecated vue-cli will work as expected.

[google-oss-bot]

Hey @NehalJadav. We need more information to resolve this issue but there hasn't been an update in 5 weekdays. I'm marking the issue as stale and if there are no new updates in the next 5 days I will close it automatically.

If you have more information that will help us get to the bottom of this, just add a comment!

[google-oss-bot]

Since there haven't been any recent updates here, I am going to close this issue.

@NehalJadav if you're still experiencing this problem and want to continue the discussion just leave a comment here and we are happy to re-open this.