Trying to render handlebar template in an express handlebars file (Uncaught ReferenceError: handlebars is not defined)

Question

Problem Statement i was able to render the messages from DB. But when i am trying to render messages from javascript file it says Uncaught ReferenceError: handlebars is not defined

What i did

i have a file chat.hbs(express handlebars) i rendered the file

res.render('chat', {chatroom, chats,user})

This has allowed me to get chat details from data base and render the same. After the messages in database are rendered i would like to use socket.io to start chat between two parties in the chat room.

Inside chat.hbs

  <div class="chat__main">
        {{!-- For messages from Database --}}
        <div class="chat__messages">
          {{#each chats}}
            <div class="message">
                <p>
                    <span class="message__name">{{sender.name}}</span>
                    <span class="message__meta">{{moment createdAt format="lll"}}</span>
                </p>
                <p> {{chat}}</p>
            </div>
         {{/each}}
        {{!-- For messages from clientside socket.io via handlebars --}}
        <div id="messages"></div> 
        </div> 
   </div>

handlebars template

        <script id="message-template" type="text/x-handlebars-template">
    <div class="message">
        <p>
            <span class="message__name">\{{username}}</span>
            <span class="message__meta">\{{createdAt}}</span>
        </p>
        <p>\{{message}}</p>
    </div>
    </script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.2.0/handlebars.min.js"></script>

client side JS inside the script tag in chat.hbs file

  <script>
       socket.on('message', (message) => {
                const html = handlebars.render(messageTemplate, {
                    username: message.userName,
                    message: message.text,
                    createdAt: moment(message.createdAt).format("Do MMM YYYY, h:mm a")
                })
                $messages.insertAdjacentHTML('beforeend',html)

            })
     </script>

Answer 1

It should be Handlebars.compile, not handlebars.render [See https://handlebarsjs.com/]