uniforms: uniforms-material 2.6.0: TypeError: Cannot read property 'prototype' of undefined

it seems that uniforms 2.6.0 broke uniforms-material, at least if you use it inside of another library. I get this error:

TypeError: Cannot read property 'prototype' of undefined
    in AutoValidatedQuickMaterialForm (created by YourComponent)

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Comments: 25 (13 by maintainers)

Commits related to this issue

Most upvoted comments

I’ve got the same issue in one project with 2.6.0.

I was able to trace the issue down to the babel and filed an issue. Not sure when it will be fixed.

The problem seems to be related to the generated by tsc es6 code.

// es6/QuickForm.js
...
getNativeFormProps() {
           // local variable name shadowing generated class name
            const _a = super.getNativeFormProps(), { autoField: AutoField = this.getAutoField(), errorsField: ErrorsField = this.getErrorsField(), submitField: SubmitField = this.getSubmitField() } = _a, props = tslib_1.__rest(_a, ["autoField", "errorsField", "submitField"]);
            if (!props.children) {
                props.children = this.getChildContextSchema()
                    .getSubfields()
                    .map((key) => React.createElement(AutoField, { key: key, name: key }))
                    .concat([
                    React.createElement(ErrorsField, { key: "$ErrorsField" }),
                    React.createElement(SubmitField, { key: "$SubmitField" })
                ]);
            }
            return props;
        }

After

    _createClass(_a, [{
      key: "getNativeFormProps",
      value: function getNativeFormProps() {
       // notice class variable name is shadowed by local variable name
        var _a = _get(_getPrototypeOf(_a.prototype), "getNativeFormProps", this).call(this),
            _a$autoField = _a.autoField,
            AutoField = _a$autoField === void 0 ? this.getAutoField() : _a$autoField,
            _a$errorsField = _a.errorsField,
            ErrorsField = _a$errorsField === void 0 ? this.getErrorsField() : _a$errorsField,
            _a$submitField = _a.submitField,
            SubmitField = _a$submitField === void 0 ? this.getSubmitField() : _a$submitField,
            props = tslib_1.__rest(_a, ["autoField", "errorsField", "submitField"]);

        if (!props.children) {
          props.children = this.getChildContextSchema().getSubfields().map(function (key) {
            return _react["default"].createElement(AutoField, {
              key: key,
              name: key
            });
          }).concat([_react["default"].createElement(ErrorsField, {
            key: "$ErrorsField"
          }), _react["default"].createElement(SubmitField, {
            key: "$SubmitField"
          })]);
        }

        return props;
      }

This issue actually prevents using library when the code is transpiled by babel.

at the moment i stick with 2.5.0, it seems that the initial problem no longer occures with 2.5.0. I have to move on now on the project and will revisit this problem in some weeks. Maybe others will have similar problems, let’s see.

Fixed by 1df4a888427e67962f2536d7386b008319908c56 and released in v2.6.6.

@radekmie If I use 2.5.0 it runs to globalThis error in tests. If I use 2.6.1 it fails to render forms due to that TypeError: Cannot read property 'prototype' of undefined.

😕

Hmm, actually the code generated by tsc works as-is if run in compatible env. So I still think it is babel that is incorrectly translating super.blah() calls. In the end it doesn’t matter how we get the original code provided that it is valid. This code works in chrome as-is

const Quick = (parent) => { var _a; return _a = class extends parent {
      b() {
        // the next line throws "Cannot read property 'prototype' of undefined"
        const _a = super.b();
        return _a + 1;
      }
  },
  _a.Quick = Quick,
  _a;
};

class A {
  b() {
    return 1
  }
}

const B = Quick(A)

const b = new B()
console.log(b.b())

But the compiled version fails https://babeljs.io/repl#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=PTAEBcAsFNQYwPYBNYEsDOoDm0B20AnAQ3GiVACMBPCdOUAd1SlGnQDYIiCdwAoRLnThQARQCuqOAGtQAXlAAKAA7c84AJTyAfKADeoAG7dQAfSIBuUAWjhxBXGaLz4AGyLpM0AB6lcSTFUbXBE9PlAIyIpFLTDI-NAQCBhQfF9QV1R8ZIIEBkwAIgBhIlxcBBEbInJlXOVCcBoAclqKiqp6ptAEADNQcX9oHqyyAvCEiMFhJxd0cXqCADpojQtxiZs7BxmAalAARjWJgF9x44AacfNFiSlZBVuZS4jzNeO1gXdPUABBfXGVv94pt7I59mc-KcBAghCIAEIuR7SRQ_DR8aGwygufAMUBwmIY9AIVzQRauBBYRQUZYxDRAA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=true&fileSize=false&timeTravel=false&sourceType=module&lineWrap=false&presets=es2015&prettier=false&targets=&version=7.7.3&externalPlugins=