ERROR in ./resources/js/app.js Module not found: Error: Can't resolve './App.vue'

Hi Good morning,

Trying to implement the https://www.algolia.com/doc/guides/building-search-ui/installation/vue/

My app has two vue components working, so I’m not sure what is going on here. Have you run into this issue?

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');
require('./forms');
require('./helpers/httpMethodLinks');

window.Vue = Vue;

import App from "./App.vue";
import Turbolinks from 'turbolinks';
Turbolinks.start();
import TurbolinksAdapter from 'vue-turbolinks';
import Vue from 'vue';
import VueAxios from 'vue-axios';

import Countdown from './components/Countdown.vue';
import LocationDropdown from './components/LocationDropdown.vue';
import AddressSearchBox from "./components/AddressSearchBox.vue";

import InstantSearch from 'vue-instantsearch';
import SponsorModal from './plugins/sponsormodal/SponsorModalPlugin';
import PortalVue from 'portal-vue';
import axios from 'axios';

Vue.use(VueAxios, axios);
Vue.use(PortalVue);
Vue.use(SponsorModal);
Vue.use(InstantSearch);
Vue.use(TurbolinksAdapter);


Vue.component('countdown', Countdown);
Vue.component('location-dropdown', LocationDropdown);
Vue.component('address-search-box', AddressSearchBox);

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

const compiler = require('vue-template-compiler');


const files = require.context('./', true, /\.vue$/i)
files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))

document.addEventListener('turbolinks:load', () => {
    const app = new Vue({
        el: '#app',
        template: '<App/>',
        components: { App },

        render: h => h(App),
    });
});


Usage: Vue.config.devtools = true;

Hi there,
Thanks for reaching out to us.
I have read your code and comments in it, but I’m afraid I don’t understand exactly what your issue is.

If possible, could you use this template to create a minimal example reproducing your issue?

I’d appreciate if you address what is supposed to be working there but not.

Please let me know how it goes.
Thanks, have a nice day.

Hi,

I believe when I pull in the nom script a App.vue file is not included. So when following the install directions I’m given that error. The codesandbox has a bunch of things not mentioned in the install, or perhaps App.vue is a “placeholder” name?

Super thank you for the codesandbox.

Let me see what I can do with this!

Thank you,
Trevor

1 Like

Hi there,

App.vue is an entry file for your Vue app.
And we assume you already have that file.
That’s why it isn’t included in Vue-InstantSearch and we didn’t mention it.
I do not know your project setup, so cannot tell any more, but
if you try to create a new Vue app like the following,

npm install -g @vue/cli
vue create my-project

, then there you will see App.vue file and how it is used as a root component.

And you can also try

npx create-instantsearch-app my-test-app

to see how it’s done there.

Let me know how it goes on your side.
Looking forward to helping you!

2 Likes

Hi, yea, I’m implementing the search/places as components in a Laravel app. So it’s not a complete Vue app.

I’ll give those commands a spin and see where I can go… Thank you.

1 Like