contactCreator component is stuck at 'loading'

challenge

I'm not able to get the contactCreator component showing in my Lightning App Builder. Is there something wrong with my code?

contactCreator.js

import { LightningElement } from 'lwc';

import { ShowToastEvent } from 'lightning/platformShowToastEvent';

import Contact_OBJECT from '@salesforce/schema/Contact';

import FirstName_FIELD from '@salesforce/schema/Contact.FirstName';

import LastName_FIELD from '@salesforce/schema/Contact.LastName';

import Email_FIELD from '@salesforce/schema/Contact.Email';

export default class ContactCreator extends LightningElement {

    objectApiFirstName = Contact_OBJECT;

    fields = [FirstName_FIELD, LastName_FIELD, Email_FIELD];

    handleSuccess(event) {

        const toastEvent = new ShowToastEvent({

            title: "Contact created",

            message: "Record ID: " + event.detail.id,

            variant: "success"

        });

        this.dispatchEvent(toastEvent);

    }

}

contactcreator.html

<template>

    <lightning-card>

        <lightning-record-form

            object-api-name={objectApiName}

            fields={fields}

            onsuccess={handleSuccess}>

        </lightning-record-form>

    </lightning-card>

</template>

contactCreator.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

    <apiVersion>48.0</apiVersion>

    <isExposed>true</isExposed>

    <targets>

        <target>lightning__AppPage</target>

    </targets>

</LightningComponentBundle>