Vue.js: Resolving the "Unknown Custom Element" Issue with Hot Module Replacement

I have a good understanding of component registration, but I am encountering a challenging issue:

  • Vue.js component Unknown custom element
  • Unknown custom element when nesting components in Vue.js

The Issue at Hand

While using the development server, I am facing an inconsistent "Unknown Custom Element" problem within a specific component (now affecting multiple components). This seems to occur only after reloading the page and can be resolved temporarily by triggering a hot module reload (HMR), such as making changes in the template and saving the file.

  • Component: PropertyEditForm
  • Imported Component: ViewEditChip
  • ViewEditChip is functioning well in other components
  • I'm assigning the component as expected in PropertyEditForm 
    • components: {'view-edit-chip': ViewEditChip}
      (TypeScript)
  • This issue disappears with HMR, but reappears after app reload

Error Message:

Unknown custom element: - Have you registered the component correctly? For recursive components, ensure to provide the "name" option.

Code Snippets

Note: This code is in TypeScript using class-component syntax

ViewEditChip declaration:

@Component({name: 'view-edit-chip'})

PropertyEditForm declaration:

@Component({
    name: 'property-edit-form',
    components: {
        'view-edit-chip': ViewEditChip
    }
})

PropertyEditForm template usage:

<view-edit-chip :item.sync="item"></view-edit-chip>

Thoughts on the Matter

  • Uncertain if this issue pertains to where or how it's being used?
  • Doubtful that the ViewEditChip itself or its import are causing the trouble since they work fine in other instances.
    • In fact, most of the structure of PropertyEditForm is copied from other functional components
  • Possibly a webpack-related problem?

Additional Insights

This issue is appearing more frequently with various components in my application. The cause is unknown, and there is no reproducible scenario. These errors surface only on a full site reload and are corrected with an HMR. They may or may not occur with the same components depending on their location within the app, which seems arbitrary to me.

For example, I have components like FileSystemTree, FileSystemToolbar, & FileSystemMainView. When used in a view called FileSystemView, they function correctly. However, creating a FileSystem component in the same directory as the above three triggers the error, even if the code is identical to FileSystemView.

Attempted Workaround Example

If I move FileSystem up one directory and adjust the imports to point to the subdirectory (which has an index.ts), the issue disappears. But relocating it back to the original directory brings back the problem.

javascripttypescriptvue.jswebpackvuetify.js

Answer №1

If you are experiencing inconsistent issues where your program functions correctly after a hot-reload but not after a refresh, it could be due to registering your component post Vue initialization. Here is an example of both incorrect and correct global component registration using vue-js-modal from main.js.

For instance (incorrect):

import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

import VModal from "vue-js-modal";
Vue.use(VModal)

Should look like this:

import Vue from 'vue'
import App from './App.vue'
VModal from "vue-js-modal";
Vue.use(VModal)
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

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

Navigating through Nuxt.js with random trailing slashes

I've encountered a bit of a snag with a project I'm working on in Nuxt.js. I've set up three pages: register.vue, login.vue, and index.vue. I attempted to use middleware functions to handle redirects between views based on whether a user is ...

vue.jsnuxt.jsvue-routertrailing-slash

Bootstrap form validation solution

Utilizing bootstrap validation to validate a jsp page. The folder structure is as follows: WebContent ├── bootstrap-form-validation ├── js └── pages All three folders are under the web content. If I create another folder called teacher ...

javascriptjqueryhtmlcsstwitter-bootstrap

Creating an array that exclusively contains numbers using anonymous object export: A step-by-step guide

I am struggling with a record that is designed to only accept values of type number[] or numbers. This is how it is structured: type numberRecords = Record<string,number[]|number>; I ran into an error when trying this: export const myList:numberRec ...

typescript

Converting JSON Arrays into Typed Arrays in NativeScript using Typescript

Can someone assist me with a problem I'm facing while learning NativeScript? I am trying to read a txt file that contains JSON data and then assign it to an Array called countries. However, despite my efforts, I have not been successful. The code sni ...

jsontypescriptnativescript

The styles in the published npm package are not being applied

Currently in the process of developing a custom npm package named react-clear-carousel, which is essentially a React component with enhanced styles using SCSS. Although I have implemented class names, the styles are not being applied when testing it out. ...

javascriptreactjsnpmwebpack

Enter key not triggering submission in jQuery UI autocomplete field

I'm currently working on implementing the autocomplete feature following a tutorial, and while it's functioning, I'm facing an issue with submitting the form when the user selects an item and hits enter. Below is the Coffeescript code that I ...

javascriptruby-on-railsjquery-uiautocompletecoffeescript

Error Encountered in Reactjs: TypeError When Looping Through State Array to Render JSX Component

Currently in the process of constructing a gallery view showcasing cards that are populated with images fetched through an axios API call. The API call is made within a useEffect hook and the resulting object is then stored using useState. However, when ...

javascriptreactjsarraysreact-hookstypeerror

eliminate empty lines from csv files during the uploading process in Angular

I have implemented a csv-reader directive that allows users to upload a CSV file. However, I have noticed an issue when uploading a file with spaces between words, resulting in blank lines being displayed. Here is an example: var reader = new FileReader ...

javascriptangularjsregexcsvfilereader

Load data from a MySQL Database into a DataTable

I am currently in the process of developing a CRUD application. With a large dataset stored in a MySQL database, my intention is to utilize a JQuery DataTable instead of manually creating a table. However, the issue I am facing is that while the table appe ...

javascriptjquerymysqldatatables

best practices for passing variables between multiple files within a nodejs application

// script.js var mydata = 1 module.exports = {mydata}; // file in my codebase var newData = require("../script.js") console.log(newData.mydata); // why is it undefined? I want to declare a variable as global across the entire project. I tried using ...

javascriptnode.jsfile

Is there a way to confirm a pattern in Express?

My model includes the attributes cartaoCidadao and estado. I would like the cartaoCidadao attribute to be an 8-digit string (for example: 12345678) and for the estado attribute to only accept two possible values (infected and suspected). How can I set up ...

javascriptnode.jsexpressmongoosemodel

The text color of the tabs turns black when a tab is selected - I receive my results after clicking anywhere on the screen

I am currently using HTML, CSS, and Bootstrap to design some tabs. Here is the current result I am achieving: https://i.sstatic.net/qbUck.png When clicking anywhere on the screen, I see the original results based on my code. The outcome after clicking a ...

javascripthtmlcsswebbootstrap-4

Is it possible to associate non-HTML elements such as v-btn with Nuxt's tag prop?

Here is the code I have been working on in my editor: <nuxt-link :to="www.test.com" tag="v-btn" /> Link Button </nuxt-link> I realized that v-btn is not a standard HTML tag, but rather a specific one for Vuetify. When I write the code this wa ...

vue.jstagsvuetify.jsnuxt.js

ASP TextChanged event is not triggering unless the user presses the Enter key or tabs out

My code is functioning correctly, however, the TextChanged event is triggered when I press enter or tab, causing my code to execute. I would like to be able to search for a record without having to press enter or tab. ASP: asp:TextBox ID="txtNameSearch ...

javascriptasp.nethtmlwebwebforms

What is the best way to disable all fields in one click using AngularJS?

I have created this HTML code that allows all fields to become editable when the "edit" button is clicked. However, I only want a specific row within the table to be editable, not the entire table. Here is the HTML code snippet: <tr ng-repeat="employe ...

javascripthtmlangularjs

Trouble with reading from a newly generated file in a node.js program

Whenever I launch my results.html page, I generate a new JSON file and use express.static to allow access to the public folder files in the browser. Although my application is functioning properly, I find myself having to click the button multiple times f ...

javascripthtmljsonnode.jsexpress

Storing a dataURL in MongoDB for easy access through a local URL using JavaScript

Unclear title, Meteor App tool needed to upload file into MongoDB export const Files = new Mongo.Collection('files'); Creating addFile function : export const addFile = (nameArg: String, dataURL: String) => { Files.insert({ _id: uuid(), ...

javascriptmongodbimagereactjsmeteor

Submit a POST request using CoffeeScript to get a string from the returned object

I am encountering a small issue. Whenever I execute myVar = $.post('/check_2/', JSON.stringify({"newname": window.NEWNAME,}), callback, 'json') The variable 'myVar' holds an object. When I use console.log myVar, the output i ...

javascriptjsonpostcoffeescript

Learn how to verify changing form inputs with Vue watchers. The challenge of numbers

Currently, I am working on a sum application and encountering some challenges with input validations. I have implemented Watcher to handle the validations, and I am exploring the possibility of adding sound and color feedback for accurate validation. Repo ...

javascriptvue.jsvalidation

I'm struggling with my project called "Number TSP" and I can't seem to figure out why it's not working properly

Upon reaching the end of my code, I am encountering an issue where instead of seeing the expected output of "Done!", it displays undefined. This is the code in question: const container = document.querySelector(".container") const table = document.querySe ...

javascripthtmlcss