0

I am trying to setup child to parent communication in lwc but i get error No MODULE named markup://c:customEventChild found : [markup://c:customEventParent]

CustomChildEvent.html

<template>
<span style="margin-left:1em;">
 <lightning-button label="child" 
                   variant="brand" 
                   onclick={handleClick}>
 </lightning-button>
</span>
</template> 

CutsomChildEvent.js

import { LightningElement, track } from 'lwc';

export default class CustomEventChild extends LightningElement {
    @track test = 'value received from child';
    handleClick(event){
        const storeEvent = new CustomEvent('myevent',{detail: this.test});
    
        this.dispatchableEvent(storeEvent);
    }
} 

CustomParenetEvent.html

<template>
<lightning-card>
<div> 
 <h1 style='font-size:1.5em; margin-left:45%;' 
     class="slds-text-title">
  This is parent screen
 </h1>
  <br/> 
<span style="font-size:2em;margin-left:30%;">
 This is response from child : 
<span style="color:#ffa372;">
 {response}
 </span> 
</span> 
 </br>
</div>
 <hr> 
<c-custom-event-child onmyevent={handleResponse}>
</c-custom-event-child>
</lightning-card>

CustomParentEvent.js

import { LightningElement ,track} from 'lwc';
export default class CustomEventParent extends LightningElement{
    @track response = '';
    //here we handled the event
     handleResponse(event){
        this.response = event.detail;
       console.log('Event =>>'+JSON.stringify(event));
     }
}
2
  • 1
    Please show the actual child component usage in the parent template. – Phil W Apr 20 at 12:42
  • i have edited this post ...you can view child component in parent – Shivani Tanwar Apr 20 at 13:04
1

Assuming you're using precisely the file names mentioned in your question, this is a problem. LWC names must start with a lowercase letter, as mentioned in the documentation.

  • Must begin with a lowercase letter
  • Must contain only alphanumeric or underscore characters
  • Must be unique in the namespace
  • Can’t include whitespace
  • Can’t end with an underscore
  • Can’t contain two consecutive underscores
  • Can’t contain a hyphen (dash)
1

You have made an error in your CustomParenetEvent.html file where you are trying to use CustomChildEvent

The code should be

<c-custom-child-event onmyevent={handleResponse}>
</c-custom-child-event>

This explains why you are getting error No MODULE named markup://c:customEventChild found : [markup://c:customEventParent]

As stated by sfdcfox you need to be careful with naming as LWC is unforgiving in the naming aspect.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.