I am trying to handle a event fired from lightning web component which is inside aura component, but i am getting below error:

ed.lightning.force.com/lightning/n/modules/c/meetingRoom.js:75:14

here is the code:

MeetingRoomAura.cmp

<aura:component implements="flexipage:availableForAllPageTypes">
    <aura:attribute name="meetingRoomInfo" type="List" />
    <aura:attribute name="selectedMeetingRoom" type="String" />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <lightning:card title="Meeting Rooms">
        <lightning:layout>
            <lightning:layoutItem size="4" padding="around-small">
                <ul>
                    <aura:iteration items="{!v.meetingRoomInfo}" var="item">
                        <li style="padding: 10px">
                            <c:meetingRoom meetingRoomInfo="{#item}" showRoomInfo="true" ontileclick="{!c.handleTileClick}"></c:meetingRoom>
                        </li>
                    </aura:iteration>
                </ul>
            </lightning:layoutItem>
            <lightning:layoutItem size="8" padding="around-small">
                You have selected : {!v.selectedMeetingRoom}
            </lightning:layoutItem>
        </lightning:layout>
    </lightning:card>
</aura:component>

MeetingRoomAuraController.js
({
    doInit : function(component, event, helper) {
        component.set("v.meetingRoomInfo", [
            {'roomName':'A-01', 'roomCapacity':'12'},
            {'roomName':'A-02', 'roomCapacity':'16'},
            {'roomName':'A-03', 'roomCapacity':'12'},
            {'roomName':'B-01', 'roomCapacity':'5'},
            {'roomName':'B-02', 'roomCapacity':'8'},
            {'roomName':'B-03', 'roomCapacity':'10'},
            {'roomName':'C-01', 'roomCapacity':'20'}
    
        ]);
    },
    handleTileClick : function(component, event, helper) {
        component.set("v.selectedMeetingRoom", event.detail.roomName;
    }
})

meetingRoom.html

<template>
    <template if:true={showRoomInfo}>
        <div class="slds-p-around_medium lgc-bg" onclick={tileClickHandler}>
            <lightning-tile label={meetingRoomInfo.roomName} href="/path/to/somewhere">
                <p class="slds-truncate" title={meetingRoomInfo.roomCapacity}>Room Capacity:
                    {meetingRoomInfo.roomCapacity}</p>
            </lightning-tile>
        </div>
    </template>
</template>

meetingRoom.js


import { LightningElement, api, wire } from 'lwc';
import {fireEvent} from 'c/pubsub';
import { CurrentPageReference } from 'lightning/navigation';
export default class MeetingRoom extends LightningElement {
    @api meetingRoomInfo = {roomName:'A-01', roomCapacity:'12'}
    @api showRoomInfo = false;
    @wire(CurrentPageReference) pageReference;    
    tileClickHandler(){
        const tileClicked = new CustomEvent('tileclick', {detail : this.meetingRoomInfo, bubbles :true});
        this.dispatchEvent(tileClicked);
        fireEvent(this.pageReference, 'pubsubtileclick', this.meetingRoomInfo);
    }
}

Someone please help me with this.

I am trying to handle a event fired from lightning web component which is inside aura component, but i am getting below error:

ed.lightning.force.com/lightning/n/modules/c/meetingRoom.js:75:14

here is the code:

MeetingRoomAura.cmp

<aura:component implements="flexipage:availableForAllPageTypes">
    <aura:attribute name="meetingRoomInfo" type="List" />
    <aura:attribute name="selectedMeetingRoom" type="String" />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <lightning:card title="Meeting Rooms">
        <lightning:layout>
            <lightning:layoutItem size="4" padding="around-small">
                <ul>
                    <aura:iteration items="{!v.meetingRoomInfo}" var="item">
                        <li style="padding: 10px">
                            <c:meetingRoom meetingRoomInfo="{#item}" showRoomInfo="true" ontileclick="{!c.handleTileClick}"></c:meetingRoom>
                        </li>
                    </aura:iteration>
                </ul>
            </lightning:layoutItem>
            <lightning:layoutItem size="8" padding="around-small">
                You have selected : {!v.selectedMeetingRoom}
            </lightning:layoutItem>
        </lightning:layout>
    </lightning:card>
</aura:component>

MeetingRoomAuraController.js
({
    doInit : function(component, event, helper) {
        component.set("v.meetingRoomInfo", [
            {'roomName':'A-01', 'roomCapacity':'12'},
            {'roomName':'A-02', 'roomCapacity':'16'},
            {'roomName':'A-03', 'roomCapacity':'12'},
            {'roomName':'B-01', 'roomCapacity':'5'},
            {'roomName':'B-02', 'roomCapacity':'8'},
            {'roomName':'B-03', 'roomCapacity':'10'},
            {'roomName':'C-01', 'roomCapacity':'20'}
    
        ]);
    },
    handleTileClick : function(component, event, helper) {
        component.set("v.selectedMeetingRoom", event.detail.roomName;
    }
})

meetingRoom.html

<template>
    <template if:true={showRoomInfo}>
        <div class="slds-p-around_medium lgc-bg" onclick={tileClickHandler}>
            <lightning-tile label={meetingRoomInfo.roomName} href="/path/to/somewhere">
                <p class="slds-truncate" title={meetingRoomInfo.roomCapacity}>Room Capacity:
                    {meetingRoomInfo.roomCapacity}</p>
            </lightning-tile>
        </div>
    </template>
</template>

meetingRoom.js


import { LightningElement, api, wire } from 'lwc';
import {fireEvent} from 'c/pubsub';
import { CurrentPageReference } from 'lightning/navigation';
export default class MeetingRoom extends LightningElement {
    @api meetingRoomInfo = {roomName:'A-01', roomCapacity:'12'}
    @api showRoomInfo = false;
    @wire(CurrentPageReference) pageReference;    
    tileClickHandler(){
        const tileClicked = new CustomEvent('tileclick', {detail : this.meetingRoomInfo, bubbles :true});
        this.dispatchEvent(tileClicked);
        fireEvent(this.pageReference, 'pubsubtileclick', this.meetingRoomInfo);
    }
}

Someone please help me with this.