Blank page with vue instant search + laravel. what's wrong with my code?

i followed the tutorial here on a fresh laravel installation: https://www.algolia.com/doc/framework-integration/laravel/tutorials/getting-started-with-laravel-scout-vuejs/?language=php

i’m getting a blank screen.

i’m reasonably confident i did everything up until these code snippets right. i didn’t get error messages while installing everything and running migrations etc. algolia dashboard shows my index and it even shows 2 searches, no idea how though as i’ve never seen the search box.

here are my MySearch.vue - app.js and welcome.blade.php

resources/js/components/MySearch.vue

   <template>
      <ais-instant-search
      :search-client="searchClient"
      index-name="contacts"
    >
      <ais-search-box placeholder="Search contacts..."></ais-search-box>
      <ais-hits>
      <template
    slot="item"
    slot-scope="{ item }"
    >
    <h1>
      <ais-highlight
        :hit="item"
        attribute="name"
      />
    </h1>
    <h4>
      <ais-highlight
        :hit="item"
        attribute="company"
      /> -
      <ais-highlight
        :hit="item"
        attribute="state"
      />
    </h4>

    <ul>
      <li>{{ item.email }}</li>
    </ul>

   </template>
  </ais-hits>
  </ais-instant-search>
  </template>
    <script> import algoliasearch from 'algoliasearch/lite';

     export default {
    data() {
      return {
      searchClient: algoliasearch(
        process.env.MIX_ALGOLIA_APP_ID,
        process.env.MIX_ALGOLIA_SEARCH
       ),
      };
    },
    };
    </script>

welcome.blade.php

   <div id="app">
        <my-search />
      </div>
      <script src="{{ mix('js/app.js') }}"></script>

resources/js/app.js

require('./bootstrap');
window.Vue = require('vue');
import VueInstantSearch from 'vue-instantsearch';
Vue.use(VueInstantSearch);
Vue.component('my-search', require('./components/MySearch.vue').default);

Hi there!

If you’re getting a blank screen, chances are there’s an error preventing your JavaScript to execute properly. Do you have any errors in your browser console?

Your code seems fine, but there are many things that could go wrong (e.g., the environment variables aren’t set, there’s a typo somewhere, etc.), so it would be easier to see the actual code to help you debug. Could you please share a reproducible repository?

Best.

Thank you very much. Here you go:

.env is not there. but it has the following at the bottom, with the appropriate credentials:

ALGOLIA_APP_ID=
ALGOLIA_SECRET=
MIX_ALGOLIA_APP_ID=
MIX_ALGOLIA_SEARCH=

hmm actually yes i am getting the following error:

DevTools failed to load SourceMap: Could not load content for http://127.0.0.1:8000/js/vue-instantsearch.esm.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

so this error i was able to resolve by calling the mix.sourceMaps() method, as:

mix.js('resources/js/app.js', 'public/js').sourceMaps()

but this did not resolve the blank page issue. no errors but still a blank page.

I don’t have the right dependencies installed to run a Laravel application; but could you deploy this somewhere so we can have a look at what code ends up on the site?

Here you go:

https://harmonious-oslo-ghgfo1ekwbxj.vapor-farm-b1.com/

I was able to get it working fine without using Laravel and I tried this so many different ways with Laravel. I think it’s either a bug with InstantSearch + Laravel or some type of error in your docs. Perhaps because of a new Laravel version. There are some things in your docs which differ from what I see.

1 Like

Something must be off with the way your Laravel application or Mix is configured seems the page you’ve shared with us does not load any meaningful JavaScript and is mostly empty. Perhaps something wrong is happening during the bundling step of Laravel.