Nuxt.js: Nuxt injecting different native instances?

[JFGHT]

Version

v2.12.2

Reproduction link

https://codesandbox.io/s/trusting-fog-j9z6d?file=/pages/index.vue

Steps to reproduce

Try to query a Firestore doc with array-contains-any or array-contains where clause in fetch or created methods.

What is expected ?

Firebase should retrive the documents with the specified query.

What is actually happening?

Error regarding a query parameter is thrown.

{ FirebaseError: Function Query.where() called with invalid data. Unsupported field value: a custom Array object

Additional comments?

Discussed here:

https://github.com/nuxt-community/firebase-module/issues/167

_{This bug report is available on Nuxt community (#c10565)}

[lupas]

Maybe important to mention is that we are quite sure that it is not a Firebase specific issue.
We define the following reference with Nuxt/Firebase:

const ref = this.$fireStore.collection('test').where("array", "array-contains-any", ["C"])

And passing in this ["C"] array seems to cause trouble on Node.js but ONLY with Nuxt.

If we do exactly the same operation in plain Node.js, all works well, see the simple example here.

Does Nuxt.js do something to arrays so Firebase would see that array as the wrong type?

[kennylam91]

I got the same problem with Nuxt and Firebase at created method

[giftcharles]

I use firebase directly without @nuxtjs/firebase but I got this exact same error as well, except I was doing:

let dynamicCollection = "xxx"

// dynamicCollection  gets changed.

let runningQuery = db.collection(dynamicCollection)

runningQuery = runningQuery.where("xxx", "in", array.slice(0, 10))

// some more where chaining

await runningQuery.get()

I am doing this in a page middleware. I was in nuxt v2.12.0 when I found this error and got it again after upgrading to v1.12.2.

Funny enough, because the collection I am querying is dynamically changed between two collections, I have noticed that this error only appears in one of my collections, Also if the page has already loaded, and the route is changed using router.push, the query works perfectly.

Just writing this here for whatever its worth.

[Atinux]

Will look at it with the team, thank you for reporting and sorry for the delay!

[clarkdo]

@JFGHT I tried in my local and it happens in dev mode, the reason is that we're using runInNewContext: true (vue-ssr will create a new vm context for rendering but not module require/import) in dev mode for avoiding potential memory leak.

You can change the config in nuxt.config.js for fixing this specific issue;

  render: {
    bundleRenderer: {
      runInNewContext: false
    }
  },

[JFGHT]

Thanks.

My bad I didn't find before https://github.com/nuxt/nuxt.js/issues/6480.

I guess we can close this.

[JFGHT]

@clarkdo Last thing: maybe this should be somehow more clear in docs?

[clarkdo]

@JFGHT Definitely, I'll create an issue in doc and change it later.

[Atinux]

@JFGHT could you point where you think it would be nice to have it in the current documentation?

[JFGHT]

Sure @Atinux.

I think it should be written in a detailed way here: https://nuxtjs.org/api/configuration-render#bundlerenderer.

But since it's an issue very related to data fetching on server side, a hint with a link on the affected life cycles docs would be extremely helpful (or in an upper layer page that describe lifecycles).

[Atinux]

Actually this is more an issue with firebase package for node depending on some globals @lupas and @JFGHT

I would suggest that the firebase module adds a note for it or directly update the render.bundleRendered.runInNewContext to false directly

[JFGHT]

Yeah, I already pointed that out in the issue there. Will try to open a PR next week.

Thanks!