Unable to construct Vue application after integrating webpack extension

Currently facing an issue with adding a webpack extension to build my Vue app. Despite having Vue/cli which includes webpack, I have also attempted to install different versions of webpack without success. Anyone experienced the same problem and found a solution? Any guidance on where I may have made a mistake would be greatly appreciated.

Tried various troubleshooting steps such as removing/reinstalling node_modules and package-lock.json files.

Error encountered when using npm run build

https://i.sstatic.net/ANlNu.png

Need assistance with adding a plugin code

https://i.sstatic.net/zLqvC.png

Sharing my package.json file for reference

https://i.sstatic.net/Vnej4.png

javascriptvue.jswebpackfrontend

Answer №1

webpack-assets-manifest version 5.x is designed specifically for use with Webpack 5. However, it seems you are currently using Vue CLI 4, which utilizes Webpack 4.

To resolve this issue, you have two options:

1. Upgrade Vue CLI to version 5.x by running the command: npm i -D @vue/cli@5

or

2. Downgrade the webpack-assets-manifest plugin to version 4.x with the command: npm i -D webpack-assets-manifest@4

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

Implement a click event to trigger a search functionality within Bootstrap

I have implemented the following code to add search options in the navigation bar. It is displaying correctly, but I am not getting the click action that I require. For example, I want to trigger an action from JavaScript when the user clicks on the enter ...

javascripthtmlangularjstwitter-bootstrap

Tips for keeping the header section anchored to the top of the page

I am having trouble getting the menu bar and logo to stick at the top of my header section in the template. I have been trying different solutions, including using the sticky.js plugin for almost 4 days now but it's not working. I also have parallax e ...

javascriptjqueryhtmlcss

The response data from Axios remains undefined even after a successful request

function verifyPassword() { let pass = document.getElementById("password").value let emailAddr = document.getElementById("email").value Service.confirmLoginPassword(emailAddr, pass).then(response => { result = re ...

javascriptreactjsaxios

Establish Vue and the Vue CLI

I'm currently in the process of setting up a new Vue project. I started off by installing @vue/cli using the following command: PS D:\OpenServer\domains\vue3-example> npm install -g "@vue/cli" Next, I attempted to create t ...

node.jsvue.jsnpmvue-cli

Utilizing numerous instances of setInterval

I've created a jsFiddle which can be found here: http://jsfiddle.net/dztGA/22/ Main Objective: My aim is to have two independent timers on the same page that can be stopped and restarted either by hovering or manually. The Issue: The problem illustr ...

javascriptjquerysetinterval

Ways to append a number to the start or end of an array using JavaScript

Can you help me figure out why the function to order the "s" array from minor to major is adding the number at the end instead of the beginning? The if statement seems to be true (2 < 7 = true) but the logic is not working as expected. Any advice on how ...

javascriptarraysloops

Exploring Vue: Techniques for leveraging and working with mappedState data

In this component, I am using `mapState` to retrieve 2 different states from the user store. The user store makes a GQL call and receives a list of `potentialNames`. Initially, while waiting for the query to complete, `fetchingData` is set to `true`, and o ...

vue.jsvuejs2vuex

Displaying the selected item right at the center of the Flatlist in React Native

I need to ensure that the item selected in the FlatList is always centered. The chosen item should have a different style compared to the others. <FlatList data={items} style={styles.listStyle} ...

javascriptnode.jsreactjsreact-native

The Naming Convention for NPM Scripts

In my package.json, I have a script that looks similar to this: { ... scripts: { ... "testdb:e2e": "TESTDB_ENV='...' gulp mocha:e2e:backend && gulp mocha:e2e:frontend" } ... } I am interested in adding a s ...

javascriptnpm

Removing all Null Form Inputs from the Document Object Model upon Submission utilizing JavaScript

I am currently working on a conditional Shopify form that was passed down to me from another developer. The form utilizes JavaScript/Jquery for field validation, ensuring that all mandatory fields are completed before proceeding to the next step. After mak ...

javascriptjqueryformsvalidationshopify

Steps to create a scrollable material-ui Modal

After setting up a Modal, I encountered an issue where the text describing my app inside the modal was overflowing, making it impossible to see the top and bottom parts. To solve this problem, I want to implement scroll functionality within the component s ...

javascriptreactjsmaterial-ui

What could be causing my express router.get endpoints with multiple paths to only render text?

Currently, I am in the process of configuring a password reset flow using Pug (formerly Jade) and Express. Oddly enough, GET requests that contain URLs with multiple appended paths are causing my Pug view files to render with only text. The images and sty ...

javascriptnode.jsexpresspug

The absence of HttpOnly Secure Cookies being transmitted

Here we go again, another inquiry regarding httpOnly Cookies. Seems like many others are facing the same predicament as me. Even though I receive the cookie from the server, it doesn't accompany other requests. I have mysite.example.com in angularj ...

javascriptangularjscookieshttponly

Sort through a list of objects by certain properties

I'm currently dealing with two arrays: one contains displayed columns and the other contains objects retrieved from a database, with more attributes than the displayed columns. displayedColumns = ['CompanyName','Ticker', 'Id& ...

javascriptarraysangulartypescript

Angular JS Array with N-level hierarchy

I am developing an application for questionnaires, where questions have responses that can lead to child questions with even more responses. This creates a hierarchical structure of multiple levels. I am looking for the best strategy to display this data i ...

javascriptarraysangularjs

Using JavaScript to modify the -webkit-animation-play-state

Hello, I'm currently facing a challenge in changing my css3 -webkit-animation-play-state property from paused to running upon clicking on another div. Does anyone have any suggestions on how I can achieve this? I believe JavaScript might be the way to ...

javascriptcsswebkit-animation

Once the PHP page loads, it becomes challenging for me to dynamically change values in JavaScript

Within my code snippet below, I am aiming to modify the initial value using a slider. The slider appears to be functioning correctly; however, it is not updating the values of timeout as indicated beneath the line $('ul.<?php echo $this->session ...

javascriptphpjqueryhtml

jQuery will envelop the HTML elements in an inconsequential div

Imagine a website that is visually complex, with various styles and images positioned in different ways. What if we wanted to add a small overlay icon above each image? At first, the solution might seem simple - just use absolute positioning for a span el ...

javascriptjquerycssdomjquery-wrap

Error: Unable to locate module: Issue: Unable to find '../components/charts/be.js' in '/vercel/workpath0/my-app/pages'

Having some trouble deploying my next.js app through Vercel. Everything works fine locally with the command 'npm run dev'. But when attempting to deploy it on Vercel using a Github remote repository, I encountered the following error: 18:07:58.29 ...

javascriptreactjswebpacknext.js

Top recommendations for integrating frontend with Laravel and Vue

Currently in the process of building a large-scale application using Laravel 5.4, I find myself wondering about the most effective approach for frontend implementation in such projects. Should I stick to using Laravel Blade for all styling and HTML renderi ...

laravel-5vue.jsfrontendvuejs2