quasar / Quasar

Remote Administration Tool for Windows
MIT License
8.67k stars 2.45k forks source link

SSR + Firebase Functions Error 500 #1081

Closed jofftiquez closed 2 years ago

jofftiquez commented 2 years ago

Describe the bug I followed the instructions/examples here: https://quasar.dev/quasar-cli-webpack/developing-ssr/ssr-production-export#example-firebase-function

I uploaded the functions successfully, as we as the corresponding hosting setup. However when I access the deployed app and/or functions I am getting the following error:

ReferenceError: Cannot access 'WEBPACK_DEFAULT_EXPORT' before initialization at Module.default (chunk-837.js:39:42)

I also used "@quasar/app-webpack": "^3.5.3", as the docs mentioned

To Reproduce Steps to reproduce the behavior:

  1. Add mode ssr
  2. Initialize firebase functions
  3. Point the source path to dist/ssr
  4. Modify the src-ssr/production-export.js file
  5. Upload the the hosting and functions

Expected behavior The app should work as intended

Screenshots Screenshot from 2022-06-14 10-34-25 image

System

Additional context production-export.js

import * as functions from 'firebase-functions';
import { ssrProductionExport } from 'quasar/wrappers';

export default ssrProductionExport(({ ssrHandler }) => {
  return {
    hippocradesOrgSSRHandler: functions.https.onRequest(ssrHandler),
  };
});

firbase.json

{
  "functions": {
    "source": "dist/ssr",
    "predeploy": "npm run build"
  },
  "hosting": [
    {
      "target": "prod",
      "public": "dist/ssr",
      "ignore": [
        "firebase.json",
        "**/.*",
        "**/node_modules/**"
      ],
      "rewrites": [{
        "source": "**",
        "function": "hippocradesOrgSSRHandler"
      }],
      "headers": [
        {
          "source": "**/*.@(eot|otf|ttf|ttc|woff|font.css)",
          "headers": [
            {
              "key": "Access-Control-Allow-Origin",
              "value": "*"
            }
          ]
        },
        {
          "source": "**/*.@(js|css)",
          "headers": [
            {
              "key": "Cache-Control",
              "value": "max-age=604800"
            }
          ]
        },
        {
          "source": "**/*.@(jpg|jpeg|gif|png|mp4|webm)",
          "headers": [
            {
              "key": "Cache-Control",
              "value": "max-age=604800"
            }
          ]
        },
        {
          "source": "404.html",
          "headers": [
            {
              "key": "Cache-Control",
              "value": "max-age=300"
            }
          ]
        }
      ]
    }
  ],
  "emulators": {
    "functions": {
      "port": 7500
    },
    "firestore": {
      "port": 7600
    },
    "hosting": {
      "port": 5000
    },
    "auth": {
      "port": 7700
    },
    "ui": {
      "enabled": true
    },
    "database": {
      "port": 9000
    }
  }
}
jofftiquez commented 2 years ago

It seems this is not a problem with Quasar, I managed to make it work with a fresh simple project. Apparently it has to do with the imports within the app as discussed here. I still haven't figured out what's wrong with my work but I will update it here. Thanks.

jofftiquez commented 2 years ago

OMG this is the wrong quasar. HAHAHAHA. My bad, I was supposed to open an issue to quasar framework. 😅