[email protected] added to Ionic3+Angular5 app: "Module Parse Failed" due to spread operator "..."

Question

It's a legacy project on life support that I don't have the luxury of upgrading to Ionic7/Angular14+. Works fine other than needing to add Sentry. Upon adding sentry-cordova (1.1.5), building now breaks due to the spread operator existing in several parts of the sentry code.

[15:58:50]  ionic-app-scripts 3.2.4 
[15:58:50]  build dev started ... 
[15:58:50]  clean started ... 
[15:58:50]  clean finished in 83 ms 
[15:58:50]  copy started ... 
[15:58:51]  deeplinks started ... 
[15:58:52]  deeplinks finished in 1.08 s 
[15:58:52]  transpile started ... 
[15:59:07]  transpile finished in 15.47 s 
[15:59:07]  preprocess started ... 
[15:59:07]  preprocess finished in 11 ms 
[15:59:08]  webpack started ... 
[15:59:08]  copy finished in 17.94 s 
[15:59:22]  ionic-app-script task: "build" 
[15:59:22]  Error: ./node_modules/@sentry/utils/esm/object.js 
Module parse failed: Unexpected token (106:6) 
You may need an appropriate loader to handle this file type. 
|    name: value.name, 
|    stack: value.stack, 
|    ...getOwnProperties(value), 
|   }; 
| } else if (isEvent(value)) { 
@ ./node_modules/@sentry/utils/esm/index.js 12:0-198 
@ ./node_modules/sentry-cordova/dist/js/sdk.js
...

package.json
{
  "name": "redacted",
  "version": "2.3.3",
  "description": "redacted",
  "author": "redacted",
  "homepage": "redacted",
  "license": "UNLICENSED",
  "private": true,
  "scripts": {
    "start": "ionic-app-scripts serve",
    "clean": "cordova clean && ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint",
  },
  "dependencies": {
    "@angular-devkit/build-optimizer": "^0.6.8",
    "@angular/animations": "5.2.11",
    "@angular/cdk": "~5.2.5",
    "@angular/common": "5.2.11",
    "@angular/compiler": "5.2.11",
    "@angular/compiler-cli": "5.2.11",
    "@angular/core": "5.2.11",
    "@angular/forms": "5.2.11",
    "@angular/material": "~5.2.5",
    "@angular/platform-browser": "5.2.11",
    "@angular/platform-browser-dynamic": "5.2.11",
    "@ionic-native/aes-256": "~4.20.0",
    "@ionic-native/android-permissions": "~4.20.0",
    "@ionic-native/barcode-scanner": "~4.20.0",
    "@ionic-native/core": "~4.20.0",
    "@ionic-native/date-picker": "~4.20.0",
    "@ionic-native/device": "~4.20.0",
    "@ionic-native/diagnostic": "~4.20.0",
    "@ionic-native/file": "~4.20.0",
    "@ionic-native/file-chooser": "~4.20.0",
    "@ionic-native/file-path": "~4.20.0",
    "@ionic-native/geolocation": "^4.20.0",
    "@ionic-native/http": "~4.20.0",
    "@ionic-native/location-accuracy": "~4.20.0",
    "@ionic-native/media": "~4.20.0",
    "@ionic-native/media-capture": "~4.20.0",
    "@ionic-native/native-geocoder": "~4.20.0",
    "@ionic-native/network": "~4.20.0",
    "@ionic-native/screen-orientation": "~4.20.0",
    "@ionic-native/splash-screen": "^4.20.0",
    "@ionic-native/sqlite": "~4.20.0",
    "@ionic-native/status-bar": "~4.15.0",
    "@ionic-native/unique-device-id": "~4.20.0",
    "@ionic/storage": "~2.2.0",
    "angular2-signaturepad": "2.11.0",
    "cordova": "^11.1.0",
    "cordova-plugin-filechooser": "~1.2.0",
    "cordova-plugin-geolocation": "4.1.0",
    "cordova-plugin-ionic-keyboard": "^2.2.0",
    "cordova-plugin-ionic-webview": "5.0.0",
    "cordova-plugin-ios-camera-permissions": "1.2.0",
    "cordova-plugin-request-location-accuracy": "~2.3.0",
    "cordova-sqlite-storage": "6.1.0",
    "cordova.plugins.diagnostic": "7.1.2",
    "crypto-js": "~3.3.0",
    "dragula": "~3.7.2",
    "es6-promise-plugin": "~4.2.2",
    "geolocator": "~2.1.5",
    "ionic-angular": "~3.9.9",
    "ionicons": "~3.0.0",
    "moment": "~2.24.0",
    "ng2-pdf-viewer": "~5.3.4",
    "ngx-color-picker": "~5.3.8",
    "ngx-pinch-zoom": "1.2.5",
    "node-sass": "^9.0.0",
    "phonegap-plugin-barcodescanner": "~8.1.0",
    "rxjs": "~5.5.12",
    "sentry-cordova": "^1.1.5",
    "sw-toolbox": "~3.6.0",
    "zone.js": "~0.8.26"
  },
  "overrides": {
    "@types/pdfjs-dist": "2.1.0",
    "ngx-pinch-zoom": {
      "@angular/common": "~5.2.11",
      "@angular/core": "~5.2.11"
    },
    "@ionic/app-scripts": {
      "node-sass": "9.0.0"
    },
    "typescript": "^3.7.7",
    "@angular/compiler": "5.2.11",
    "@angular/core": "5.2.11",
    "@angular/animations": "5.2.11"
  },
  "devDependencies": {
    "@compodoc/compodoc": "~1.1.11",
    "@ionic/app-scripts": "^3.2.4",
    "@types/crypto-js": "~3.1.43",
    "@types/google.maps": "~3.50.2",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "cordova-android": "^12.0.0",
    "cordova-ios": "^6.3.0",
    "cordova-plugin-aes256-encryption": "~2.0.1",
    "cordova-plugin-android-permissions": "^1.1.5",
    "cordova-plugin-androidx-adapter": "~1.1.3",
    "cordova-plugin-camera-with-exif": "^1.5.1",
    "cordova-plugin-datepicker": "^0.9.3",
    "cordova-plugin-device": "^2.1.0",
    "cordova-plugin-file": "^7.0.0",
    "cordova-plugin-filepath": "^1.6.0",
    "cordova-plugin-media": "^6.1.0",
    "cordova-plugin-nativegeocoder": "^3.5.1",
    "cordova-plugin-network-information": "^3.0.0",
    "cordova-plugin-screen-orientation": "^3.0.3",
    "cordova-plugin-statusbar": "^3.0.0",
    "typescript": "^3.7.7"
  },
  "peerDependenciesMeta": {
    "@sentry:browser": {
      "optional": true
    }
  },
  "cordova": {
    "plugins": {
      "cordova-plugin-ionic-keyboard": {},
      "phonegap-plugin-barcodescanner": {
        "ANDROID_SUPPORT_V4_VERSION": "27.+"
      },
      "cordova-plugin-request-location-accuracy": {
        "PLAY_SERVICES_LOCATION_VERSION": "16.+"
      },
      "cordova-plugin-nativegeocoder": {
        "LOCATION_WHEN_IN_USE_DESCRIPTION": "Using geocoder service"
      },
      "cordova-plugin-filechooser": {},
      "cordova-plugin-ios-camera-permissions": {
        "CAMERA_USAGE_DESCRIPTION": "This app needs camera access",
        "MICROPHONE_USAGE_DESCRIPTION": "This app needs microphone access",
        "PHOTOLIBRARY_ADD_USAGE_DESCRIPTION": "This app needs write-access to photo library",
        "PHOTOLIBRARY_USAGE_DESCRIPTION": "This app needs read/write-access photo library access"
      },
      "cordova-plugin-aes256-encryption": {},
      "cordova-plugin-androidx-adapter": {},
      "cordova-sqlite-storage": {},
      "cordova-plugin-splashscreen": {},
      "cordova.plugins.diagnostic": {},
      "cordova-plugin-ionic-webview": {},
      "cordova-plugin-geolocation": {},
      "cordova-plugin-add-swift-support": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-network-information": {},
      "cordova-plugin-screen-orientation": {},
      "cordova-plugin-file": {
        "ANDROIDX_WEBKIT_VERSION": "1.4.0"
      },
      "cordova-plugin-media": {
        "KEEP_AVAUDIOSESSION_ALWAYS_ACTIVE": "NO"
      },
      "cordova-plugin-filepath": {},
      "cordova-plugin-android-permissions": {},
      "cordova-plugin-camera-with-exif": {
        "ANDROIDX_CORE_VERSION": "1.6.+"
      },
      "cordova-plugin-datepicker": {},
      "cordova-plugin-device": {},
      "sentry-cordova": {}
    },
    "platforms": [
      "ios",
      "android"
    ]
  },
  "config": {
    "ionic_generate_source_map": "true"
  },
  "volta": {
    "node": "18.16.0"
  }
}

tsconfig.json
{
  "compileOnSave": false,
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [
      "dom",
      "es2015"
    ],
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true,
    "inlineSources": true,
    "sourceRoot": "/",
    "downlevelIteration": true,
    "importHelpers": true,
    "target": "es5",
    "typeRoots": ["./node_modules/@types","./typings","./node_modules/@sentry/types"],
    "types": ["google.maps"],
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "src/**/*.spec.ts",
    "src/**/__tests__/*.ts"
  ]
}

.babelrc (added hoping this would fix issue)
{
  "plugins": ["transform-object-rest-spread"]
}

I've tried

https://www.npmjs.com/package/babel-plugin-transform-object-rest-spread via .babelrc but that had no effect.
Tried modifying the target, lib, and module values in tsconfig; es5/es2015 is what was original to the app.
I attempted a custom webpack config but really don't have sufficient knowledge to override ionic/angular configs.
Updating the Babel packages but that broke the build elsewhere.
Using the older 0.17.0 version of sentry-cordova...compiles but production build won't function.

The app needs to live one more year until we can replace it, was hoping to use Sentry to find and address some current issues.

MTIA

user1590553 · Accepted Answer · 2023-06-30 23:03:29Z

I was able to get a custom babel loader to work by doing the following: custom.webpack.config.js:

const webpackConfig = require('./node_modules/@ionic/app-scripts/config/webpack.config.js');

const sentryRule = {
  test: /\.js$/,
  include: /node_modules\/@sentry/,
  loader: {
    loader:'babel-loader',
    options: {
      presets: ['env'],
      plugins: [require('babel-plugin-transform-object-rest-spread')]
    }
  }
}
webpackConfig.dev.module.loaders.push(sentryRule);
webpackConfig.prod.module.loaders.push(sentryRule);

...adding the following packages ([email protected] !important):

npm install --save-dev [email protected] [email protected] [email protected] [email protected]

...and adding "ionic_webpack": "./custom.webpack.config.js" to the config object of package.json.

I can't say this is the correct way...but it's a landing I could walk away from.

Collectives™ on Stack Overflow

[email protected] added to Ionic3+Angular5 app: "Module Parse Failed" due to spread operator "..."

1 Answer 1

Not the answer you're looking for? Browse other questions tagged
ionic3
angular5
sentry
or ask your own question.

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Not the answer you're looking for? Browse other questions tagged ionic3angular5sentry or ask your own question.

Related

Not the answer you're looking for? Browse other questions tagged
ionic3
angular5
sentry
or ask your own question.