Instantsearch is not a function error ( on initialization )

Hi there,
We have an issue getting instantsearch.js to start up (initialize) within a Vue component - getting the following console error:

[Vue warn]: Error in mounted hook: "TypeError: instantsearch is not a function"

found in

---> <KAlgSearchMainCourse> at /Users/cb/Documents/projects/kee/resources/assets/js/components/kee/algCourseMain.vue
       <Root>

I’m following the guide here https://community.algolia.com/instantsearch.js/v2/getting-started.html.

In the Vue component the cause of the errors I believe are:

<script>
const instantsearch = require('instantsearch.js');
// ... and later on
mounted() {
    const search = instantsearch({ // ...

Is there something I should be aware of in using vue components in this way do you know?

Here’s the full Component code:

<template>
  <div>
      <p>Test content vue is outputting data as expected:</p>
      <p>{{msg}}</p>

  </div>
</template>

<script>
const instantsearch = require('instantsearch.js');

export default {
  data() {
    return {
      msg: "data string output from Vue"
    };
  },
  mounted() {

    console.log(instantsearch);
    console.log(this.msg);
    const search = instantsearch({
        appId,
        apiKey,
        indexName,
        urlSync: true,
        searchParameters: {
            hitsPerPage: 5, // best to match an option in Pagination array
            attributesToSnippet: ["snippet:35"],
            snippetEllipsisText: "..."
      }
    });

    search.start();

  }
};
</script>

and here’s package.json in case it gives up any clues.

  "devDependencies": {
        "axios": "^0.15.3",
        "baguettebox.js": "^1.9.1",
        "bootstrap-sass": "^3.3.7",
        "browser-sync": "^2.18.13",
        "browser-sync-webpack-plugin": "^1.2.0",
        "cross-env": "^5.0.1",
        "gsap": "^1.20.2",
        "laravel-mix": "^1.3.1",
        "lodash": "^4.17.4",
        "plyr": "^2.0.13",
        "scroll": "^2.0.0",
        "svg4everybody": "^2.1.9",
        "tinysort": "^2.3.6",
        "vue": "^2.4.2"
    },
    "dependencies": {
        "autoprefixer": "^7.1.5",
        "babel-loader": "^7.1.1",
        "del-cli": "^1.1.0",
        "flickity": "^2.0.9",
        "instantsearch.js": "^2.2.1",
        "node-sass": "^4.5.3",
        "sass-loader": "^6.0.6",
        "scrolldir": "^1.2.13",
        "vue-loader": "^12.2.2",
        "webpack-svgstore-plugin": "^4.0.1"
    }

Thank you for taking a look.

Sorry all, simple fix:

// const instantsearch = require('instantsearch.js');
import instantsearch from "instantsearch.js";

:blush:

1 Like

Hey.
We have a similar problem. We are using Laravel with Laravel-Mix and Webpack.
We are using instantsearch.js 2.0.2 and if we upgrade to actual version 2.8.* we ware getting the error:
“TypeError: instantsearch is not a function”
We are using npm with window.instantsearch = require(‘instantsearch.js’); in our app.js
I have no idea what i can do, that it will work :frowning: