Ionic SSR getting error 'erroReferenceError: Blob is not defined

72 Views Asked by At

I'm trying to migrate my pwa project to a SSR model, a already implemented the SSR on the project but when I run the comand 'npm run dev:ssr' i'm getting this error:

`ReferenceError: Blob is not defined     at Module.69250 (/Users/cbyk172/Documents/projects/truly-ionic/dist/app/server/vendor.js:152132:14)     at __webpack_require__ (../src/app/app.component.scss:470:1)     at Module.54729 (/Users/cbyk172/Documents/projects/truly-ionic/dist/app/server/vendor.js:135407:76)     at __webpack_require__ (../src/app/app.component.scss:470:1)     at Module.6235 (../src/app/app.component.scss:470:1)     at __webpack_require__ (../src/app/app.component.scss:470:1)     at Module.24172 (../src/app/app.component.scss:470:1)     at __webpack_require__ (../src/app/app.component.scss:470:1)     at Module.68466 (../src/app/app.component.scss:470:1)     at __webpack_require__ (../src/app/app.component.scss:470:1)`

I already tried to put global['Blob'] = require('node-blob'); in the server.ts, but it didn't work

Here is my package.json:

`

{
  "name": "truly-app",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "android:local": "ionic cordova run android --host localhost --port 8100 --livereload",
    "android:prod": "ionic cordova build android --prod --release",
    "android:dev": "ionic cordova run android",
    "ios:local": "ionic cordova run ios",
    "ios:prod": "ionic cordova build ios --prod",
    "ios:dev": "ionic cordova build ios",
    "web:deploy:dev": "ionic build && firebase deploy --only hosting:truly-demo",
    "web:deploy:prod": "ionic build --prod && firebase deploy --only hosting:prod",
    "dev:ssr": "ng run app:serve-ssr",
    "serve:ssr": "node dist/app/server/main.js",
    "build:ssr": "ng build && ng run app:server",
    "prerender": "ng run app:prerender"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^16.2.2",
    "@angular/common": "15.0.0",
    "@angular/core": "15.0.0",
    "@angular/fire": "^6.1.5",
    "@angular/forms": "15.0.0",
    "@angular/platform-browser": "15.0.0",
    "@angular/platform-browser-dynamic": "15.0.0",
    "@angular/platform-server": "15.0.0",
    "@angular/router": "15.0.0",
    "@angular/service-worker": "15.0.0",
    "@awesome-cordova-plugins/app-version": "^6.3.0",
    "@awesome-cordova-plugins/camera": "^5.44.0",
    "@awesome-cordova-plugins/camera-preview": "^5.44.0",
    "@awesome-cordova-plugins/chooser": "^5.44.0",
    "@awesome-cordova-plugins/core": "^6.3.0",
    "@awesome-cordova-plugins/deeplinks": "^6.4.0",
    "@awesome-cordova-plugins/file": "^5.44.0",
    "@awesome-cordova-plugins/file-path": "^5.44.0",
    "@awesome-cordova-plugins/in-app-browser": "^5.44.0",
    "@awesome-cordova-plugins/ionic-webview": "^5.44.0",
    "@awesome-cordova-plugins/media": "^5.44.0",
    "@awesome-cordova-plugins/media-capture": "^6.3.0",
    "@awesome-cordova-plugins/onesignal": "^5.44.0",
    "@awesome-cordova-plugins/social-sharing": "^5.44.0",
    "@awesome-cordova-plugins/splash-screen": "^5.44.0",
    "@ionic-native/core": "^5.36.0",
    "@ionic/angular": "^7.3.0",
    "@ionic/angular-server": "^7.3.1",
    "@ionic/cordova-builders": "^9.0.0",
    "@ionic/pwa-elements": "^3.1.1",
    "@nguniversal/express-engine": "^15.2.1",
    "@teamhive/lottie-player": "^1.0.0",
    "croppie": "^2.6.5",
    "express": "^4.15.2",
    "extendable-media-recorder": "^6.5.2",
    "firebase": "^8.8.1",
    "get-blob-duration": "^1.2.0",
    "graphemer": "^1.3.0",
    "joi": "^17.4.2",
    "ngx-pinch-zoom": "^2.6.2",
    "node-blob": "0.0.2",
    "onesignal-ngx": "^1.0.2",
    "rxjs": "^7.5.0",
    "swiper": "^10.2.0",
    "tslib": "^2.2.0",
    "twilio-video": "^2.26.2",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^15.2.4",
    "@angular-eslint/builder": "15.0.0",
    "@angular-eslint/eslint-plugin": "15.0.0",
    "@angular-eslint/eslint-plugin-template": "15.0.0",
    "@angular-eslint/schematics": "15.0.0",
    "@angular-eslint/template-parser": "15.0.0",
    "@angular/cli": "15.0.0",
    "@angular/compiler": "15.0.0",
    "@angular/compiler-cli": "15.0.0",
    "@angular/language-service": "15.0.0",
    "@ionic/angular-toolkit": "^9.0.0",
    "@ionic/lab": "3.2.10",
    "@nguniversal/builders": "^15.2.1",
    "@types/express": "^4.17.0",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "@typescript-eslint/eslint-plugin": "4.16.1",
    "@typescript-eslint/parser": "4.16.1",
    "cordova-android": "^10.1.2",
    "cordova-ios": "^6.2.0",
    "cordova-plugin-add-swift-support": "^2.0.2",
    "cordova-plugin-app-version": "^0.1.14",
    "cordova-plugin-camera": "^6.0.0",
    "cordova-plugin-camera-preview": "^0.12.3",
    "cordova-plugin-chooser": "^1.3.2",
    "cordova-plugin-device": "2.0.2",
    "cordova-plugin-file": "^7.0.0",
    "cordova-plugin-filepath": "^1.6.0",
    "cordova-plugin-inappbrowser": "^5.0.0",
    "cordova-plugin-ionic-keyboard": "^2.0.5",
    "cordova-plugin-ionic-webview": "^5.0.0",
    "cordova-plugin-media": "^6.0.0",
    "cordova-plugin-media-capture": "^4.0.0",
    "cordova-plugin-splashscreen": "^6.0.2",
    "cordova-plugin-statusbar": "^2.4.2",
    "cordova-plugin-video-capture-plus": "^1.0.0",
    "cordova-plugin-x-socialsharing": "^6.0.3",
    "es6-promise-plugin": "^4.2.2",
    "eslint": "^7.6.0",
    "eslint-plugin-import": "2.22.1",
    "eslint-plugin-jsdoc": "30.7.6",
    "eslint-plugin-prefer-arrow": "1.2.2",
    "ionic-plugin-deeplinks": "^1.0.24",
    "jasmine-core": "~3.8.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.3.2",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "onesignal-cordova-plugin": "^2.11.1",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "typescript": "~4.8.4",
    "workbox-cli": "6.5.4"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-ionic-webview": {},
      "cordova-plugin-ionic-keyboard": {},
      "cordova-plugin-camera": {
        "ANDROIDX_CORE_VERSION": "1.6.+"
      },
      "cordova-plugin-media": {
        "KEEP_AVAUDIOSESSION_ALWAYS_ACTIVE": "NO"
      },
      "cordova-plugin-file": {},
      "cordova-plugin-filepath": {},
      "cordova-plugin-chooser": {},
      "cordova-plugin-camera-preview": {},
      "cordova-plugin-inappbrowser": {},
      "cordova-plugin-x-socialsharing": {
        "PHOTO_LIBRARY_ADD_USAGE_DESCRIPTION": "This app requires photo library access to function properly.",
        "PHOTO_LIBRARY_USAGE_DESCRIPTION": "This app requires photo library access to function properly."
      },
      "cordova-plugin-splashscreen": {},
      "onesignal-cordova-plugin": {},
      "cordova-plugin-app-version": {},
      "cordova-plugin-media-capture": {},
      "ionic-plugin-deeplinks": {
        "ANDROID_PATH_PREFIX": "/",
        "ANDROID_2_PATH_PREFIX": "/",
        "ANDROID_3_PATH_PREFIX": "/",
        "ANDROID_4_PATH_PREFIX": "/",
        "ANDROID_5_PATH_PREFIX": "/",
        "DEEPLINK_2_SCHEME": " ",
        "DEEPLINK_3_SCHEME": " ",
        "DEEPLINK_3_HOST": " ",
        "DEEPLINK_4_SCHEME": " ",
        "DEEPLINK_4_HOST": " ",
        "DEEPLINK_5_SCHEME": " ",
        "DEEPLINK_5_HOST": " "
      }
    },
    "platforms": [
      "ios",
      "android"
    ]
  }
}

I'm trying to run my pwa site in a sever side render mode, I got a error when I tried to run the command 'npm run dev:ssr'

0

There are 0 best solutions below