Why is Vue algolia instant search producing“Unexpected token 'export'” when I import state mappings or router

I’m using algolia instant search in my vue js application running on the quasar framework in ssr mode. I want to do routing in my application with the instant searching widgets. Docs are detailed here.

I’m following the instructions, which are very simple. I import the following:

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

Then in my data I init the routing objects:

data() {
  return {
    searchClient: algoliasearch(
      "",
      ""
    ),
    routing: {
      router: historyRouter(),
      stateMapping: singleIndexMapping("instant_search"),
    },
  };
},

After this point, if I try and refresh my page I get the following error pointing back to the stateMappings import and routing imports:

Unexpected token 'export'
Open: internal/modules/cjs/loader.js
Unable to locate file source.

I’m fairly certain this is due to running my vue quasar app in ssr mode but the interesting thing is I am explicitly running algolia on the client only as specified in my quasar.conf.js file and wrapping the component I wrote that runs algolia instant search in the <q-no-ssr> tag:

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

My custom component that encapsulates vue instant search widgets:

 <q-no-ssr>
    <SearchComponent :numHits="4" :homePage="true" />
 </q-no-ssr>

How can I utilize the algolia instant search routing, history, and state mappings this way?

This is likely since you didn’t set up webpack to transpile the node_modules for instantsearch. I’m not sure which option it’s exactly, but you should find on this page (https://quasar.dev/quasar-cli/handling-webpack) the equivalent of nodeExternals.

see: