Nothing is getting displayed on webpage while using ember.js

I am building a simple web application using ember.js ,but in the webpage ,nothing is displayed ,in the console the following error is being displayed.I am using mirage as the back end

rsvp.js:26 Uncaught TypeError: Cannot read properties of undefined (reading 'sentence')
    at Temp.title (post.js:10:1)
    at eval (mirage-esm.js:485:24)
    at Array.forEach (<anonymous>)
    at sortAttrs (mirage-esm.js:481:22)
    at Factory.build (mirage-esm.js:388:16)
    at EmberServer.build (mirage-esm.js:7325:24)
    at EmberServer.create (mirage-esm.js:7397:30)
    at EmberServer.createList (mirage-esm.js:7466:31)
    at Object._default [as default] (default.js:9:1)
    at EmberServer.config (mirage-esm.js:7152:37

I am adding some files code here for the understanding , application.hbs

<div class ="jumbo">
<h2 id="title">
    My ember blog
    
</h2>
</div>

posts.js under templates

<ul>
  
    <li>
      
    </li>
  
</ul>

post.js under model folder in app

import Model, { attr } from '@ember-data/model';

export default class PostModel extends Model {
  @attr title;
  @attr body;
  @attr('date') publishedAt;
}

posts under routes in app folder

import Route from '@ember/routing/route';

export default class PostsRoute extends Route {
  model() {
    return this.store.findAll('post');
  }
}

posts.js under factories under mirage folder

import { Factory } from 'miragejs';

import faker from '@faker-js/faker';

export default Factory.extend({
  title() {
    return faker.lorem.sentence();
  },

  body() {
    return faker.lorem.paragraph();
  },

  publishedAt() {
    return faker.date.past();
  },
});

So these are the files that I have used in this project .and if you know the structure of emp app ,you will be able to understand these files. My ember-cli version is 3.24.0 node: 14.21.3 os: linux x64 Please help me in resolving this ,I am beginner in ember