SSR is broken

[ArcoMul]

Bug 🐞

What is the current behavior?

The SSR example causes an error, which I'm also receiving in my own implementation.

TypeError: (intermediate value)(intermediate value)(intermediate value) is not a constructor
    at a (node_modules/vue-instantsearch/vue2/es/src/util/createServerRootMixin.js:1:363)
    at app.js:14981:1049
    at async Promise.all (index 0)

Make a sandbox with the current behavior

https://github.com/algolia/vue-instantsearch/tree/master/examples/ssr

The only things I changed, are:

   "dependencies": {
     "algoliasearch": "^4.0.1",
     "instantsearch.css": "^7.1.1",
-    "vue": "^2.6.7",
-    "vue-instantsearch": "file:../../",
+    "vue": "2.6.11",
+    "vue-instantsearch": "^4.0.0",
     "vue-router": "^3.0.2",
-    "vue-server-renderer": "^2.6.11"
+    "vue-server-renderer": "2.6.11"
   },
   "devDependencies": {
     "@akryum/vue-cli-plugin-ssr": "^0.5.0",
@@ -25,7 +25,7 @@
     "babel-eslint": "^10.0.1",
     "eslint": "^5.14.1",
     "eslint-plugin-vue": "^5.2.2",
-    "vue-template-compiler": "^2.6.7"
+    "vue-template-compiler": "2.6.11"
   },

What is the expected behavior?

Not receiving that error

Does this happen only in specific situations?

No

What is the proposed solution?

Seems like the code which errors is trying to use the this passed in findResultsState as a constructor. I don't understand the context, so that's as far as I got :-)

    serverPrefetch() {
      return this.instantsearch.findResultsState({
        component: this, // I think the value passed here is being used as a constructor, which it isn't
        renderToString
      });
    },

What is the version you are using?

4.0.0

[Haroenv]

This should be the fixed version: https://codesandbox.io/s/crimson-bush-ni2ii?file=/src/main.js. Not sure at which point Vue made the component name required, but before component(options) worked, now it seems like it needs to be component(name, options).

function renderToString(app) {
  import('vue-server-renderer/basic').then(({ default: _renderToString }) => {
    return new Promise((resolve, reject) => {
      _renderToString(app, (err, res) => {
        if (err) reject(err);
        resolve(res);
      });
    });
  });
}

function cloneComponent(componentInstance, { mixins = [] } = {}) {
  const options = {
    serverPrefetch: undefined,
    fetch: undefined,
    _base: undefined,
    name: 'ais-ssr-root-component',
  };

  let app;

  // copy over global Vue APIs
  options.router = componentInstance.$router;
  options.store = componentInstance.$store;

  const Extended = componentInstance.$vnode
    ? componentInstance.$vnode.componentOptions.Ctor.extend(options)
    : // this different, in the source code is only `Vue.component(Object.assign({}, componentInstance.$options, options))`
      Vue.component(
        options.name,
        Object.assign({}, componentInstance.$options, options)
      );

  app = new Extended({
    propsData: componentInstance.$options.propsData,
    mixins: [...mixins],
  });

  // https://stackoverflow.com/a/48195006/3185307
  app.$slots = componentInstance.$slots;
  app.$root = componentInstance.$root;
  app.$options.serverPrefetch = [];

  return app;
}

// ...
    mixins: [
      createServerRootMixin({
        $cloneComponent: cloneComponent,
        indexName: 'instant_search',
        searchClient,

// ...
    serverPrefetch() {
      return this.instantsearch.findResultsState({
        component: this,
        renderToString,
      });
    },

[Haroenv]

If you want an inbetween solution while we figure out what went wrong, you can also use Vue InstantSearch v3

[Haroenv]

We have just finished a comprehensive refresh of the server-side interaction with routing in the case of Vue InstantSearch. This managed to close this issue for both v3 in 3.9.0 and v4 in 4.3.2.

The pull requests in question are:

• fix(server): extend component correctly if at root #1105 (v3) fix(ssr): extend component correctly if at root (vue2) #1104 (v4)

If the component at the root is the one doing findResultsState, it doesn't have access to $vnode, and in that branch the component name is required to be passed via the first argument.

• feat(ssr): prevent initial network request #1106 (v3) feat(ssr): prevent initial network request #1090 (v4)

This is a little more involved, but fixes the issue where routing is not taken in account. Essentially in InstantSearch it was changed so that routing only gets read on .start, but Vue InstantSearch was faking start.

Luckily, in a recent version of InstantSearch, some functionality of server rendering / initial results has moved inside InstantSearch itself, and it avoids the issue, as we can use regular 'start' from then on.