formio / formio.js

JavaScript powered Forms with JSON Form Builder
https://formio.github.io/formio.js
MIT License
1.88k stars 1.06k forks source link

TypeError: Cannot read properties of undefined (reading 'Custom') #5408

Open JanSatnik opened 10 months ago

JanSatnik commented 10 months ago

version: @formio/js": "5.0.0-rc.29" ... "5.0.0-rc.32", "@formio/angular": "^5.5.0-rc.11",

How to reproduce: When I want to check the validity of a form using (Component.checkValidity()) and the form has a Custom component, I get this error. It works fine locally, so I think problem is with import const types_1 = require("../types");. You might also want to remove "skipLibCheck": true from the tsconfig.json file. Without this setup, you have a few more errors when building your app.

image image

Custom component. ->

import * as formiojs from '@formio/js';
import { ExtendedComponentSchema } from '@formio/js';

// eslint-disable-next-line
const InputFormiojs = (formiojs as any).Components.components.component;

export class ContentCustomComponent extends InputFormiojs {
  constructor(component: object, options: object, data: object) {
    super(component, options, data);
  }
  static get builderInfo() {
    return {
      title: 'Content',
      group: 'layout',
      icon: 'html5',
      preview: false,
      documentation: '/userguide/#content-component',
      weight: 5,
      schema: ContentCustomComponent.schema(),
    };
  }
  get content() {
    if (this['builderMode']) {
      return this['component'].html || '';
    }
    return this['component'].html
      ? this['interpolate'](this['component'].html, {
          metadata: {},
          data: this['rootValue'],
          row: this['data'],
        })
      : '';
  }
  static schema(...extend: ExtendedComponentSchema[]) {
    return InputFormiojs.schema({
      label: 'Content Custom',
      type: 'contentCustom',
      key: 'contentCustom',
      ...extend,
    }) as ExtendedComponentSchema[];
  }
  static editForm = () => {
    return {
      components: [
        {
          weight: 0,
          type: 'textarea',
          editor: 'quill',
          label: 'Content',
          hideLabel: true,
          input: true,
          key: 'html',
          as: 'html',
          rows: 3,
          tooltip: 'The HTML template for the result data items.',
        },
      ],
    };
  };
  render() {
    return super.render(this.content);
  }
} 

In app before submit formio form i check if form is valid if (this.formio.formio.checkValidity()) {...}

lane-formio commented 3 months ago

After review, we don't expect to resource a developer to investigate this in the near future but would be happy to review any contributions to resolve this behavior.