Vue-instantsearch: V2 SSR

[alexbudure]

Feedback on the v2 prerelease version 🆕

Describe the bug / features

When will it be SSR compatible? I don't mind not being able to prefetch the hits on the server, but right now I can't even import widgets in a component without it throwing a server error.

[samouss]

Thanks for asking the question! We plan to have a "basic" support of SSR for the stable release of the v2. We don't have any ETA at the moment but we are working on it.

[Haroenv]

Which error are you getting in SSR? While we don't have prefetching yes (working on it as said), I have a working example on my end of SSR with flash of white content without errors.

Can you edit https://codesandbox.io/s/github/nuxt/codesandbox-nuxt to be to the state where you get errors?

[alexbudure]

@Haroenv I'm getting the following error

error during render : /
/Users/alexbudure/Documents/GitHub/<private>/node_modules/instantsearch.js/es/connectors/index.js:1
(function (exports, require, module, __filename, __dirname) { export { default as connectClearAll } from './clear-all/connectClearAll.js';
                                                              ^^^^^^

SyntaxError: Unexpected token export

All I did was run npm install vue-instantsearch@beta and then

import InstantSearch from 'vue-instantsearch'
Vue.use(InstantSearch)

[Haroenv]

You need to make sure it gets transpiled. Which Vue SSR setup do you use?

[alexbudure]

It does. All my other imports are working. I use a derivation of https://github.com/vuejs/vue-hackernews-2.0

I will try to get a codesandbox link tonight

[alexbudure]

Actually, if you download that repo and try adding it in app.js, you'll get the same thing. I must be missing something minor, but I can't figure it out.

I have even tried commenting out the line under webpack.base.config.js that excludes node_modules from being processed by the babel-loader.

On the codesandbox nuxt link, it works. Any ideas on why it's not getting transpiled?

[Haroenv]

The setup I'm trying this out (while I admit, it's fairly experimental) is using the Vue CLI SSR plugin, https://github.com/algolia/vue-instantsearch/blob/6f1994460340baacd9b1120095378ab73b526afa/examples/ssr/vue.config.js#L4-L9 is a plugin rule I can give to make sure it transpiles for node. I'd have to look which setting to use in a raw webpack version

[Haroenv]

The place you need to put that is here:

https://github.com/vuejs/vue-hackernews-2.0/blob/4dff0740b182f34c4c5fe1e2017576e3ffcea521/build/webpack.server.config.js#L24

[alexbudure]

Thank you!! This worked.

I have to ask, why was this needed for v2 but not for v1?

[Haroenv]

In v1 there were no transitive dependencies that used import / export I think. I'll close this issue for now, but don't worry, we are also working on real SSR!

[kevintruby]

While working on implementing the latest version of vue-instantsearch for a feature branch (_working wonderfully with SSR btw 😄_), I ran into an issue with the library causing a test failure for our Jest unit tests. Seems like it only caused a failure on the script that tested some SSR functionality, but the fix was related to this whitelisting mentioned above.

Our implementation is using the standard Vue CLI v3.9 process for SSR, and not the @akryum/vue-cli-plugin-ssr module as outlined in the Algolia documentation.

To get this working with Jest, change:

transformIgnorePatterns: [
  '/node_modules/',
],

to this:

transformIgnorePatterns: [
  '/node_modules/(?!(vue-instantsearch|instantsearch))',
],

in jest.config.js

[Haroenv]

good call, I hope tools will start working better with modules soon!

[toyflish]

I'm getting a similar error on a nuxt project running specs for a vue-component.
Setting transformIgnorePatterns in jest.config.js did not fix it for me, is there something nuxt specific to this problem?
node: v14.15.4, nuxt: v2.14.12, jest: v26.6.3, instantsearch.js: v4.8.3

[Haroenv]

can you make a GitHub project with this setup and open a new issue please @toyflish ?