Exception in template helper: TypeError: Cannot read property 'mergedSchema' of undefined

I am new in meteor. I am using simple schema for quickForm and got this error. Exception in template helper: TypeError: Cannot read property 'mergedSchema' of undefined

main.html

<template name="hello">
  <button>Click Me</button>
  <p>You've pressed the button {{counter}} times.</p>
  {{> quickForm collection="Books" id="bookUpdateForm" type="insert"}}    

</template>

main.js

import './hello.html';    
import { Books } from '../../../api/links/books.js';

 Template.hello.onCreated(function () {
     Meteor.subscribe('books');
 });

Collection JS

import SimpleSchema from 'simpl-schema';
export const Books = new Mongo.Collection("books");
const Book = new SimpleSchema({
title: {
    type: String,
    label: "Title",
    max: 200
},
author: {
    type: String,
    label: "Author"
},
copies: {
    type: SimpleSchema.Integer,
    label: "Number of copies",
    min: 0
},
lastCheckedOut: {
    type: Date,
    label: "Last date this book was checked out",
    optional: true
},
summary: {
    type: String,
    label: "Brief summary",
    optional: true,
    max: 1000
}

});

Books.attachSchema(Book);

Solution

There is a typo that causes a follow up error. You collection is namen "books" but you pass "Books" to your quickForm. Because AutoForm cannot find any collection named "Books" in global scope it will throw an error.

This approach also assumes Books to be in window scope.

If you are new to JS, then you may first read about scopes and window scope:

https://developer.mozilla.org/en-US/docs/Glossary/Scope

https://developer.mozilla.org/en-US/docs/Web/API/Window

Why are global variables considered bad practice?

Less error prone pattern

An alternative approach would be to import Books to your template (as you have already done) and provide it to quickForm via a Template helper:

main.html

<template name="hello">
  {{> quickForm collection=getCollection id="bookUpdateForm" type="insert"}}    
</template>

Note getCollection which is basically calling a helper you define in your Template helpers section:

main.js

import './hello.html';    
import { Books } from '../../../api/links/books.js';

Template.hello.onCreated(function () {
    Meteor.subscribe('books');
});

Template.hello.helpers({
    getCollection() {
      return Books;
    }
});

By doing so you have a) avoided window (global) scope and b) avoided errors due to spelling errors, because you pass the reference to the collection directly to the quickForm.

Collection JS

import SimpleSchema from 'simpl-schema';
export const Books = new Mongo.Collection("books");
const Book = new SimpleSchema({
    title: {
        type: String,
        label: "Title",
        max: 200
    },
    author: {
        type: String,
        label: "Author"
    },
    copies: {
        type: SimpleSchema.Integer,
        label: "Number of copies",
        min: 0
    },
    lastCheckedOut: {
        type: Date,
        label: "Last date this book was checked out",
        optional: true
    },
    summary: {
        type: String,
        label: "Brief summary",
        optional: true,
        max: 1000
    }
});

Books.attachSchema(Book);