Vue is struggling to load the component files

Lately, I've been encountering an error during webpack build that is causing some issues.

ERROR  There were 3 errors encountered while compiling

The following relative modules could not be found:

* ./components/component1.vue in ./resources/assets/js/lmi/app.js
* ./components/component2.vue in ./resources/assets/js/lmi/app.js
* ./components/component3.vue in ./resources/assets/js/lmi/app.js

app.js

document.addEventListener("DOMContentLoaded", function() {

    const Vue = require('vue');

    // Registering all the parent components
    Vue.component('component1', require('./components/component1.vue'));
    Vue.component('component2', require('./components/component2.vue'));
    Vue.component('component3', require('./components/component3.vue'));

    // Initializing the root vue instance.
    const app = new Vue({
        el: '#app'
    });
});

Steps taken so far:

  • This used to work fine before and I have even gone through older branches and re-ran npm install again.

  • I tried specifying the absolute path in the require statements, but then I get a different error message instead:

 ERROR  There were 3 errors encountered at 12:14:37 PM
These dependencies were missing:

 /resources/assets/js/lmi/components/hourly-wage.vue in ./resources/assets/js/lmi/app.js
 /resources/assets/js/lmi/components/search.vue in ./resources/assets/js/lmi/app.js
 /resources/assets/js/lmi/components/hiring-demand.vue in ./resources/assets/js/lmi/app.js

To resolve these, you can run: npm install --save /resources/assets/js/lmi/components/hourly-wage.vue /resources/assets/js/lmi/components/search.vue /resources/assets/js/lmi/components/hiring-demand.vue

I'm quite puzzled by this situation. Any guidance on what might be causing this would be greatly appreciated.

javascriptwebpackvue.js

Answer №1

Just discovered the solution. Turns out it was an issue with NPM. I asked a coworker to run the same command on their computer and it worked perfectly fine. To further troubleshoot, I decided to quickly switch to using yarn instead and surprisingly, it resolved the problem...

The problematic version for me was npm 5.4.2.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What could be the reason for receiving [object object] from a JSON response?

Utilizing the datatables plugin, I am in need of refilling the table with ajax. To achieve this, I populate the table columns with the data retrieved from an ajax file (in json format) as shown in the following code snippet: $.get(select.data('url&a ...

javascriptjqueryjsondatatables

Animation of active chat list items on Whatsapp

Has anyone figured out a simple method to create an animation like the one in Whatsapp? For example, when you are on a chat screen and go back to the chat list, have you noticed how an active element is briefly highlighted in gray (to indicate which chat ...

javascriptcssanimation

What is the optimal approach for displaying numerous button components with varying values?

I've been developing a calculator in React and I decided to render all the buttons using the Button Panel component with what some might call a "brute force" method. return ( <> <div> <Button value="A/C" cl ...

javascriptreactjs

I encountered an error stating that there was no 'Access-Control-Allow-Origin' header present on the requested resource

When I attempted to make a request from my @vue/cli 4.5.8 app to my Laravel (Laravel Framework 8.24.0) backend hosted at , I encountered an error in the console: Access to XMLHttpRequest at 'http://local-backend-currencies.com/login' from origin ...

laravelvue.jscors

Issue with Jquery Conflict in WordPress

Apologies if my inquiry is not up to standard. I am currently utilizing a Google library in my project. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> The issue arises when this conflicts with the jQuery u ...

javascriptjqueryajaxwordpressslider

What is the process for creating a global variable in JavaScript?

Having trouble changing the value of "invocation_num" within a loop? I attempted to modify it as follows, but ended up with an undefined value. Any help would be greatly appreciated. $(document).on("click", '.favoret', function(){ document ...

javascriptjqueryhtmlcss

JavaScript's ASYNC forEach function not following the expected sequence

I'm really struggling to understand the workings of async and await in this scenario. I want the forEach function to run before the console.log and res.json, but no matter what I do with async and await, it always ends up being the last thing executed ...

javascriptnode.jsexpress

Gain access to a variable within an AngularJS directive's scope

I am facing an issue with the following directive var chartDir = function () { return { scope: { stat: '=' }, link: function (scope, element, attr) { console.log(scope); return; } } HTML < ...

javascriptangularjs

Organizing Angular Material Styles using Namespacing

In an attempt to develop reusable components with Angular 1.4.3 and Angular-Material 1.0.5, the goal is to seamlessly integrate these components across various applications. However, a challenge arises as the Angular Material CSS contains styling rules th ...

javascriptcssangularjsangular-material

What is the technique for anchoring elements at the top of the page when scrolling?

There is a common design feature where the sidebar on the left starts at a lower position on the page, but as you scroll it moves up to the top and remains fixed in place instead of disappearing off the screen. This is a popular design trend that I have ...

javascriptjquerycsshtmlparallax

Vuetify's paginated server-side datatable does not support client-side sorting

The Challenge The issue I am facing revolves around using a server-side paginated datatable. Specifically, when utilizing the Vuetify data tables component and attempting to perform client-side sorting due to using a public API that I did not develop, the ...

javascriptvue.jsdatatablevuetify.jsserver-side-rendering

Handling Errors: Communicating with the Frontend

I'm facing a challenge with error handling in my authentication API calls. Whenever I trigger the 500 status from Express, my frontend (using Vue) only displays the message Request failed with status code 500 instead of something more informative like ...

javascriptnode.jsexpressvue.js

What is the most effective approach for annotating TypeScript abstract classes that are dynamically loaded?

I am in the process of developing a library that allows for the integration of external implementations, and I am exploring the optimal approach to defining types for these implementations. Illustration abstract class Creature { public abstract makeN ...

javascripttypescripttypesabstract-class

Tips for verifying that a file has not been selected in Croppie

Whenever I use croppie to crop images on my website, everything works fine when I select an image and upload it. But if I try to crop and upload without selecting an image, a black image gets uploaded instead. How can I validate if the file upload is empty ...

javascriptphpjqueryhtmlcodeigniter-3

The browser does not automatically set the Cookie

Trying to login involves making an API call using a POST HTTP request. post( postLogin(email), JSON.stringify({password: passwd}), { headers: { "Content-Type":"application/json" }, credentials: 'include' // also attempted with &a ...

javascriptreactjshttpcookiesredux

Resetting the Angular provider configuration whenever the service is injected into a different location

Trying to wrap my head around a rather complex issue here. I have a service set up as a provider in order to configure it. Initially, this service has an empty array of APIs which can be dynamically added to by various configuration blocks. When adding API ...

javascriptangularjsangular-providers

Attempting to grasp the correct method for understanding For loops

Lately, I've been diving into teaching myself Node.JS and it has been quite an enjoyable experience. However, I've hit a frustrating roadblock that is really causing me some grief. For some reason, I just can't seem to grasp the concept of F ...

javascriptjquerynode.js

How to Generate Custom Expiry Tokens with Firebase Authentication

Currently utilizing Firebase 3.4.1 for my web application. The default token expiry length is sufficient to keep users logged in, but I am interested in managing the expiry manually. Ideally, I would like the token to expire at the end of each session by ...

javascriptfirebase-authentication

Exploring the proper syntax of the reduce() method in JavaScript

Here are two codes that can be executed from any browser. Code1: let prices = [1, 2, 3, 4, 5]; let result = prices.reduce( (x,y)=>{x+y} ); // Reduces data from x to y. console.log(result); Code2: let prices = [1, 2, 3, 4, 5]; let result = prices.red ...

javascriptecmascript-6

I am encountering difficulty in printing multiple documents from FireStore

I am facing an issue where I can successfully retrieve and print all documents from a Firestore collection one by one using console.log(). However, when attempting to display these documents on the screen, only the most recent document is showing up. Here ...

javascriptreactjsfirebasegoogle-cloud-firestore