Firebase Hosting: Function not working with ServerMiddleware (Vue/ Nuxt)

Question

I am building a project that utilises ServerMiddleware to render some pages client side only (I can't find another way of getting this working well without ServerMiddleware. Problems on refreshing pages and so on...)

The problem: Unfortunately every time I try and deploy to my Firebase Function through 'firebase deploy' I get an error:

Error: Cannot find module '~/serverMiddleware/selectiveSSR.js'

The function builds OK if I exclude the following line. Nuxt/ Vue is not including ~/serverMiddleware/ as part of its build as far as I can see.

Here is the code in nuxt.config.js to reference my serverMiddleware:

serverMiddleware: ['~/serverMiddleware/selectiveSSR.js']

Adding either the directory or path (as above) to the file itself within Build in nuxt.config.js does not help either. Maybe I am doing it wrong?

Everything works perfectly when testing (Not building) locally.

Any ideas on how I can resolve this please?

Thanks!

If I understood correctly, the following line didn't help as well right? serverMiddleware: ['~/serverMiddleware'] — Kevin Quinzel

Bes Bes · Accepted Answer · 2020-03-06T12:27:03

Ok so for anyone else who hits this, here is how I got around it.

Firstly, I don't know if this is the fault of Firebase Hosting or Nuxt (I would guess Nuxt but I stand to be corrected), but here is what to do....

1) Remove any reference to ServerMiddleware from nuxt.config.js

2) Add the following to nuxt.config.js

modules: [
    '~/local-modules/your-module-name'
  ],

3) Create directory ~/local-modules/your-module-name in your project root

4) In the new directory, create a package.json:

{
    "name": "your-module-name",
    "version": "1.0.0"
  }

and index.js - key thing, this.addServerMiddleware allows you to call middleware server-side

module.exports = function(moduleOptions) {
  this.addServerMiddleware('~/serverMiddleware/')
}

5) Create directory ~/serverMiddleware

6) Add your middleware function to index.js in the new directory:

export default function(req, res, next) {
 // YOUR CODE
  next() // Always end with next()!
}

7) Update package.json with your new local module under "dependencies":

    "your-module-name": "file:./local-modules/your-module-name"

Don't forget you need to do this within the functions directory too or Firebase will complain it can't find your new module

Firebase Hosting: Function not working with ServerMiddleware (Vue/ Nuxt)

1 Answers