Having trouble getting Vue async components to function properly with Webpack's hot module replacement feature

Currently, I am attempting to asynchronously load a component. Surprisingly, it functions perfectly in the production build but encounters issues during development. During development, I utilize hot module replacement and encounter an error in the console stating that the component was unable to load.

This is how I define my component registration:

 Vue.component('product-page', ()=> import('./app/components/ProductPage.vue'));

Error:

vue.runtime.esm.js?2b0e:619 [Vue warn]: Failed to resolve async component: function () {
        return Promise.all(/*! import() */[__webpack_require__.e(0), __webpack_require__.e(1), __webpack_require__.e(2), __webpack_require__.e(32)]).then(__webpack_require__.bind(null, /*! ././app/components/ProductPage.vue */ "./src/app/components/ProductPage.vue"));
    }

In my webpack configuration, the following is included:


output:{
     path: path.resolve(__dirname, 'dist'),
     filename: '[name].bundle.js' ,
     publicPath: 'http://localhost:8088/',
}

Do I require any specific configurations or what mistake am I making?

javascriptvue.jswebpack

Answer №1

After encountering an issue, I managed to find a resolution. In my development process, I utilize two separate webpack dev servers. These servers make use of jsonp to load chunks as needed. Upon inspection, I noticed that the generated function for loading chunks was identical on both servers. This resulted in difficulties resolving the chunk URL, with Server A attempting to fetch assets using Server B's port.

The Fix

To address this issue, I made the decision to explicitly specify the function name for the jsonp. This adjustment can be implemented through the output configuration property in webpack.

For instance:

ouput: {
   filename: '[name].bundle.js',
   jsonpFunction: 'myCustomFunctionName'
}

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

IntelliJ is not able to detect certain JS libraries

Currently, I am working on an NDV3 AngularJS graph demo using IntelliJ. To start off, I have created a standard HTML file named index.html and included all the necessary AngularJS and NDV3 libraries in a folder called bower_components located within the r ...

javascriptangularjsintellij-idea

Is there a way to send a Razor boolean variable to an Angular directive?

Within my cshtml file, I am working with a boolean variable. However, when attempting to pass this variable to my Angular directive, it is being received as "False" rather than "false". Even hardcoding it to be "false" in lowercase does not solve the issue ...

javascriptc#angularjsrazorboolean

JavaScript Arrays and Their Mysterious Undefined Elements

Creating a basic HTML document with a JavaScript script can be quite simple. ... <script type = "text/javascript"> src = "xxx.js"></script> ... <body> <ul id ="pics"> <li><a href="A.jpg">A</a></li> ...

javascriptarraysundefined

Is it possible to insert clickable links within the content of a Twilio text message?

Currently, I am utilizing Twilio and Express to send programmable SMSs to the users of my web application. I'm curious if it's possible to include hyperlinks within the body of these text messages. Is there a method to achieve this? I have attem ...

javascripthtmlnode.jsexpresstwilio

Link dynamic Vue image source from node_modules

I am currently working on a Vue component that displays an SVG image from my node modules based on a specific image name or key provided by an API. If I directly specify the source image like ~cryptocurrency-icons/svg/color/eur.svg, it loads without any i ...

node.jsvue.jsvuejs2node-modulesvue-loader

Utilizing a React Hook to set data by creating a pure function that incorporates previous data using a thorough deep comparison methodology

I have come across the following code snippet: export function CurrentUserProvider({ children }) { const [data, setData] = useState(undefined); return ( <CurrentUserContext.Provider value={{ data, setData, }} & ...

javascriptreactjsreact-nativereact-hooks

How can I retain the selected item's information from a list in React JS when navigating to the next page?

In order to showcase various countries, I utilized ListItem in my Country.js file. For a visual representation of this setup, check out the CodeSandbox link I have provided: My Code One functionality I am aiming for is having the program remember the sel ...

javascriptreactjslistmaterial-uilistitem

Is it possible to utilize hooks such as 'useState' within an async/await server component?

'use client' async function Teachers (){ const response = await fetch('http://localhost:8000/teachers', }) const data = await response.json(); const [showNames , setShowNames] = useState(false); // Unable t ...

javascriptnext.jsnext.js13

Running into trouble importing an ES module in Node.js during a migration

Currently, I am in the process of developing a straightforward application for my personal project using ExpressJS. To manage database changes, I have opted to utilize sequelize ORM. My current objective is to rollback a migration, and to achieve this goal ...

javascriptnode.jsecmascript-6sequelize.jsmysql2

Storing user input data with LocalStorage in a Vue application with multiple

I am facing a challenge with my Vue app that has multiple input fields posting to the same list. I need a way to store this data so that when the site is refreshed, the input field outputs are saved. Both the taskList and subTaskList array should be saved, ...

vue.jslocal-storage

What steps can I take to ensure that my server is accessible to all users?

After successfully creating a chat server using Node.JS and hosting it on my LocalHost (127.0.0.1), I realized that only I have access to the chat. To make the chat server accessible to everyone, I want to deploy it on my real server. The real server URLs ...

javascripthtmlnode.js

Fade in an image using Javascript when a specific value is reached

Here's the select option I'm working with: <div class="okreci_select"> <select onchange="changeImage(this)" id="selectid"> <option value="samsung">Samsung</option> <option value="apple">App ...

javascripthtml

What are some effective methods to completely restrict cursor movement within a contenteditable div, regardless of any text insertion through JavaScript?

Recently, I encountered the following code snippet: document.getElementById("myDiv").addEventListener("keydown", function (e){ if (e.keyCode == 8) { this.innerHTML += "&#10240;".repeat(4); e.preventDefault(); } //moves cursor } ...

javascripthtmlcursor

When using the `sendFile` method in Node.js Express, you will notice that the HTML content

Hey there, I'm new to nodejs and trying to create a simple website with two pages. I'm facing an issue where the content of the second file is being rendered as the first one, even though the source inspector in the browser indicates that it&apos ...

javascripthtmlnode.jsexpressfrontend

javascript guide to dynamically update the glyphicon based on value changes

I am attempting to implement an optimal level feature where a glyphicon arrow-up will be displayed if a value falls within the optimum range, and it will switch to a glyphicon arrow-down if the value is lower. <div class="card-body" ng-repeat="item i ...

javascripthtmlangularjsglyphicons

Please provide either a string or an object containing the proper key for TypeScript

Within my project, the languageSchema variable can either be a string or an object containing the 'Etc' key. The corresponding interface is defined as follows: let getLanguageSchema = (language: string): string => languagesSchemas[language]; ...

javascriptreactjstypescriptreact-typescript

Angular Promises - Going from the triumph to the disappointment callback?

It seems like I might be pushing the boundaries of what Promises were intended for, but nonetheless, here is what I am attempting to do: $http.get('/api/endpoint/PlanA.json').then( function success( response ) { if ( response.data.is ...

javascriptangularjsangular-promise

Setting a background color in Vuetify: A comprehensive guide

Currently, in my Vuetify application using the Light theme, the background of the main content is automatically set to a light grey. However, I specifically need it to be white. I've attempted to override this by adjusting the stylus variables, but I ...

vue.jsvuetify.js

What is the best way to retrieve the current value of a React useState hook within a setInterval function while using Highcharts

import Error from 'next/error' import React, { useState, useEffect } from 'react' import Highcharts from 'highcharts' import HighchartsReact from 'highcharts-react-official' function generateChart() { const [co ...

javascriptreactjshighchartsnext.jssetinterval

How can I match dates in order to run the following code?

If Purchase Date is after 31/Mar/xxxx it should not calculate elap_yend, rem_days, depre_cur, cur_wdv. Also I have to calculate GST with some options that is if SGST and CGST are chosen, I should not calculate IGST else if IGST selected or marked it shoul ...

javascriptjqueryhtmlajax