Cannot add new trait

I am trying to add a new trait but it is not working. I have done quite a bit of research and tried multiple ways but it still does not seem to be working. Can you please guide what I may be doing wrong.

Option 1:

export default function (editor, opt = {}) {
  const c = opt;
  const pfx = c.formClsPfx;
  const FORMIO_TYPE = 'jmi_form';

  editor.DomComponents.addType(FORMIO_TYPE, {

    model: {
      defaults: {
        formURL: c.formURL,
        droppable: false,
        traits: [
          // Strings are automatically converted to text types
          'name', // Same as: { type: 'text', name: 'name' }
        ],
      }
    },
    isComponent(el) {
      if (el.getAttribute &&
        el.getAttribute('data-gjs-type') === FORMIO_TYPE) {
        return {
          type: FORMIO_TYPE
        };
      }
    },
    view: {
      init() {
        const comps = this.model.get('components');

        // Add a basic dynamic_form template if it's not yet initialized
        if (!comps.length) {
          comps.reset();
          //Note that we have out "data-gjs-editable="false" below in the div tag
          //Refer to: https://github.com/artf/grapesjs/issues/422
          comps.add(`
          <div data-gjs-editable="false" data-js="jmi_form" className="${pfx}"> This is test component </div>
          `);
        }
      } //End of init
    },

  });   //End of domc.addType
} //End of export function  

Option2: Trying to add programatically. I am following doc from: https://grapesjs.com/docs/modules/Traits.html#add-traits-to-components

export default function (editor, opt = {}) {
  const c = opt;
  const pfx = c.formClsPfx;
  const FORMIO_TYPE = 'jmi_form';

  editor.DomComponents.addType(FORMIO_TYPE, {

    model: {
      defaults: {
        formURL: c.formURL,
        droppable: false,
        traits(component) {
          const result = [];
          result.push('name');
          console.log("in here##########")
          return result;
        },
      }
    },
    isComponent(el) {
      if (el.getAttribute &&
        el.getAttribute('data-gjs-type') === FORMIO_TYPE) {
        return {
          type: FORMIO_TYPE
        };
      }
    },
    view: {
      init() {
        const comps = this.model.get('components');

        // Add a basic dynamic_form template if it's not yet initialized
        if (!comps.length) {
          comps.reset();
          //Note that we have out "data-gjs-editable="false" below in the div tag
          //Refer to: https://github.com/artf/grapesjs/issues/422
          comps.add(`
          <div data-gjs-editable="false" data-js="jmi_form" className="${pfx}"> This is test component </div>
          `);
        }
      } //End of init
    },

  });   //End of domc.addType
} //End of export function  

This option 2 is giving compilation error.