Nuxt dev server hangs when using `findResultsState` with children routes

[sheldonbaker]

Bug 🐞

I have an odd issue when using Nuxt, SSR, and vue-instantsearch. Following this guide, I've made a stripped down demo repo of the bug in question (I've confirmed that the issue is happening with a fresh git pull, yarn and yarn dev of that repo).

It simply seems that some combination of using this.instantsearch.findResultsState in serverPrefetch and having a <router-view /> or <NuxtChild /> in the same component causes the dev server to eat a bunch of memory and eventually crash. Sometimes an event emitter error is printed to the dev server console. Aside from that, not much to go on.

[Haroenv]

Thanks for giving a reproduction. Does the same happen with https://github.com/algolia/vue-instantsearch/tree/master/examples/nuxt or https://github.com/algolia/doc-code-samples/tree/master/Vue%20InstantSearch/nuxt

[sheldonbaker]

The error indeed occurs with https://github.com/algolia/vue-instantsearch/tree/master/examples/nuxt - though I cheated by using "vue-instantsearch": "4.3.3", in my package.json after getting Couldn't resolve vue-instantsearch errors.

This time it also spit out that EventEmitter error:

ERROR (node) warning: possible EventEmitter memory leak detected. 11 listeners added. Use emitter.setMaxListeners() to increase limit

The error definitely mucks up my local ports on my machine as well. Every time I restart the dev server, it picks a progressively higher port, as the previous one is still in use, as the server didn't clean up properly.

I'll try the other repo as well (any tips on how to fix the Can't resolve vue-instantsearch errors?).

EDIT: It happens with the doc-code-samples repo as well. Everything works as expected, but as soon as I put a <router-view /> in search.vue, the dev server hangs.

My current node version is v14.18.2.

[Haroenv]

This is odd, I can indeed reproduce the "max listeners" warning, which implies to me the same InstantSearch instance is used for every render, and not a fresh one.

The "can't resolve Vue InstantSearch" error in the example in the repository is as it has file:../../ as the path, which helps us with end-to-end tests, but makes it some the example is harder to use externally. That indeed should also be fixed separately from this unwanted retention

[Haroenv]

@sheldonbaker, thanks for the report, I have attempted to fix it, and on my side I no longer get the "too many listeners" warning, however I could never see a memory leak, so I wonder if your setup somehow is more sensitive to it?

The pull request (draft for now, as I didn't update the tests) https://github.com/algolia/vue-instantsearch/pull/1115

You can install the version from the PR by following the steps in https://ci.codesandbox.io/status/algolia/vue-instantsearch/pr/1115/builds/218570

I'd love to hear your feedback on that fix!

[sheldonbaker]

Thanks! I'll schedule to take a look tomorrow!

[Haroenv]

@sheldonbaker, did that pull request fix your issue?

[sheldonbaker]

Sorry for the delay. Just trying this out now.

It seems I'm getting a different error on loading that /search route (I do recall seeing that error before and solving it, but I've forgotten exactly how now):

Cannot set property $nuxt of [object Object] which has only a getter

[Haroenv]

That's odd! @sheldonbaker, if you use this PR https://github.com/algolia/vue-instantsearch/pull/1117 as well (manually make the change in node_modules), does the error go away as expected?

[podlebar]

@Haroenv i tried it and it does not solve the issue.

[sonnd08]

I got the same error, but it works with nuxt 2.14.6. It's broken after this update

Still waiting for an update

 ERROR  Cannot set property $nuxt of [object Object] which has only a getter

[Haroenv]

Did the workaround in #1117 work for you @sonnd08 ?

[sonnd08]

Did the workaround in #1117 work for you @sonnd08 ?

No, it is not.

 ERROR  [Vue warn]: Error in beforeCreate hook: "TypeError: Cannot set property $nuxt of [object Object] which has only a getter"

(found in <Root>)


 ERROR  Cannot set property $nuxt of [object Object] which has only a getter

  at VueComponent.beforeCreate (server.js:48383:28)
  at invokeWithErrorHandling (node_modules/vue/dist/vue.runtime.common.dev.js:1859:57)
  at callHook (node_modules/vue/dist/vue.runtime.common.dev.js:4223:7)
  at VueComponent.Vue._init (node_modules/vue/dist/vue.runtime.common.dev.js:4999:5)
  at new VueComponent (node_modules/vue/dist/vue.runtime.common.dev.js:5148:12)
  at server.js:48510:15
  at server.js:48373:13
  at runMicrotasks (<anonymous>)
  at processTicksAndRejections (internal/process/task_queues.js:95:5)

[harlan-zw]

For anyone else coming to this issue, this bug affects nuxt 2 and was introduced in version 4.3.3 with a nuxt 3 fix (https://github.com/algolia/vue-instantsearch/pull/1112). You can resolve it by rolling back to 4.3.2.

There's a draft PR to fix the issue here: https://github.com/algolia/vue-instantsearch/pull/1117/files

[Haroenv]

does #1117 work for you @harlan-zw? I got conflicting information which is why I didn't pursue that solution

[eugjlee]

Hello @Haroenv,

With Nuxt 2, I was also having memory leak issues. Using Siege, I was doing user simulation of 40 request in 30 seconds, and each time memory was increasing.

However, #1115 did fix the issue.
After building the library with #1115 , I was getting a constant 70mb usage which was not increasing in memory even after 120 request in 60 seconds.

#1117 did not fix the "TypeError: Cannot set property $nuxt of [object Object] which has only a getter" on my side. What I did to fix this was change a boolean on line 115 in createServerRootMixin, from true to false.

const isWritable = descriptor ? descriptor.writable || descriptor.set : false;

In Nuxt 2, descriptor is undefined, so I just made sure "isWritable" is set to false.