How to use Routing, uiState, and history with an SSR app running on vue quasar?

[joe-berg-colossus]

I'm using vue instantsearch inside of my quasar ssr app. I'm trying to set up routing, uiState, and history in order to persist algolia query params to my URLs like is shown in the demos for vue apps that are not running on the quasar framework.

As the instructions state, I added the following to my component where vue instantsearch is running:

<script>
import { history as historyRouter } from 'instantsearch.js/es/lib/routers';
import { singleIndex as singleIndexMapping } from 'instantsearch.js/es/lib/stateMappings';

export default {
  data() {
    return {
      searchClient: algoliasearch(
        'latency',
        '6be0576ff61c053d5f9a3225e2a90f76'
      ),
      routing: {
        router: historyRouter(),
        stateMapping: singleIndexMapping('instant_search'),
      },
    };
  },
};
</script>

Now, whenever I refresh the page, I get the following error which I can see in the stacktrace that it's originating from the instantsearch.js class:

SyntaxError (500) Unexpected token 'export'

Additionally, I've even configured algolia to run only on the client via quasar.conf.js and even wrapped the instantsearch component in a <q-no-ssr> tag.

quasar.conf.js

boot: [
      'axios',
      {path: 'algolia', server: false},
],

algolia boot file

// import something here
import InstantSearch from "vue-instantsearch";
import 'instantsearch.css/themes/algolia.css';

// "async" is optional;
// more info on params: https://quasar.dev/quasar-cli/boot-files
export default async ({ Vue } /* { app, router, Vue ... } */) => {
  // something to do
  Vue.use(InstantSearch);
};

It seems like all of this is related to my app running in SSR mode. I'd love to know what the issue is here and how to account for it. Many thanks in advance.

[eunjae-lee]

Hi @joe-berg-colossus, Does it only happen when you routing-related code?

I just created an example from quasar CLI and it seems to be working (although I didn't put any routing-related code yet) https://github.com/eunjae-lee/quasar_test

Could you share with us a reproducible example?

[joe-berg-colossus]

Yes, it only happens when I import the routing files from algolia. This also includes the stateMappings import.

Were you able to successfully add algolia routing to your quasar ssr app?

[joe-berg-colossus]

When I changed the import path from /es/lib/routers to /cjs/lib/routers things started to work.

Any idea why that is? @eunjae-lee

import { history as historyRouter } from 'instantsearch.js/cjs/lib/routers'; import { singleIndex as singleIndexMapping } from 'instantsearch.js/cjs/lib/stateMappings';

[eunjae-lee]

I just tried it. Although the routing is not correctly set up, but it's imported and being used: https://github.com/eunjae-lee/quasar_test/commit/ab81bcc0cc827193573f40624d7a83854173680e

I don't get such an error. I guess there's something wrong around dealing with ES module, either on quasar or on your setup. Can you create any file in your project and try to import it, like

// a.js
export function testFunction() {
 // does nothing
}

and from the page where you have InstantSearch:

import { testFunction } from './a';

And see if it works.

[Haroenv]

This is an old issue, so I'll assume that it has been fixed in the mean time. If you have more issues, please open a new issue and give a reproduction. Thanks!