Skip to content
This repository has been archived by the owner on Dec 30, 2022. It is now read-only.

Commit

Permalink
fix(nuxt3): forward $nuxt on the instance by default (#1112)
Browse files Browse the repository at this point in the history
* fix(nuxt3): forward $nuxt on the instance by default

This is similar to how we forward $router and $store, but in this case it needs to happen before the beforeCreate of nuxt happens

* conditionnel pr茅sent
  • Loading branch information
Haroenv committed Feb 10, 2022
1 parent 71c25d4 commit acda293
Show file tree
Hide file tree
Showing 2 changed files with 62 additions and 1 deletion.
54 changes: 54 additions & 0 deletions src/util/__tests__/createServerRootMixin.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -660,6 +660,60 @@ Array [
await renderToString(wrapper);
});

it('forwards nuxt', async () => {
const searchClient = createFakeClient();

let nuxt = 0;
// every time the function gets called, we get a different "nuxt"
// this can be used to assert both "nuxt" objects are equal
const getNuxtCounter = () => ++nuxt;

// there are two renders of App, each with an assertion
expect.assertions(2);

const App = {
mixins: [
{
beforeCreate() {
this.$nuxt = getNuxtCounter();
},
},
forceIsServerMixin,
createServerRootMixin({
searchClient,
indexName: 'hello',
}),
],
data() {
expect(this.$nuxt).toEqual(1);
return {};
},
render: renderCompat(h =>
h(InstantSearchSsr, {}, [
h(Configure, {
attrs: {
hitsPerPage: 100,
},
}),
h(SearchBox),
])
),
serverPrefetch() {
return this.instantsearch.findResultsState({
component: this,
renderToString,
});
},
};

const wrapper = createSSRApp({
mixins: [forceIsServerMixin],
render: renderCompat(h => h(App)),
});

await renderToString(wrapper);
});

it('searches only once', async () => {
const searchClient = createFakeClient();
const app = {
Expand Down
9 changes: 8 additions & 1 deletion src/util/createServerRootMixin.js
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ function defaultCloneComponent(componentInstance, { mixins = [] } = {}) {

if (isVue3) {
const appOptions = Object.assign({}, componentInstance.$options, options);
appOptions.mixins = [...appOptions.mixins, ...mixins];
appOptions.mixins = [...mixins, ...appOptions.mixins];
app = createSSRApp(appOptions);
if (componentInstance.$router) {
app.use(componentInstance.$router);
Expand Down Expand Up @@ -104,6 +104,13 @@ function augmentInstantSearch(instantSearchOptions, cloneComponent) {
app = cloneComponent(component, {
mixins: [
{
beforeCreate() {
if (component.$nuxt) {
// In case of Nuxt (3), we ensure the context is shared between
// the real and cloned component
this.$nuxt = component.$nuxt;
}
},
created() {
instance = this.instantsearch;

Expand Down

3 comments on commit acda293

@weotch
Copy link

@weotch weotch commented on acda293 Feb 25, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We're seeing fatal errors during SSR since vue-instantsearch@4.3.3 with Nuxt 2.15.8. Rolling back to 4.3.2 fixes the issue.

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

image

@Haroenv
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for your report @weotch, can you reproduce this in a standalone GitHub repository? If you can, I'd love if you could create an issue to look into. Thanks a lot!

@Haroenv
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've tried to make a PR @weotch, but I can't yet reproduce, do you mind commenting on #1117, maybe trying out with the instructions on https://ci.codesandbox.io/status/algolia/vue-instantsearch/pr/1117/builds/223195?

Please sign in to comment.