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

[macrozone]

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)

[macrozone]

i remember this problem to beeing related to circular dependencies

[radekmie]

Hi @macrozone. I've seen the same problem while updating our documentation. Can you somehow reproduce it elsewhere? It just works in our projects and documentation.

[macrozone]

@radekmie could not reproduce it in the example of https://github.com/react-page/react-page

It happens in my project. proably because i needed to force webpack to transpile uniforms.

[radekmie]

It'd be great if you could provide a reproduction, or at least a full stack trace along with the relevant parts of the files (including their names, to know if it uses ES5 or ES6 build) so I could at least try help you.

[macrozone]

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.

[yuryturing]

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.

[radekmie]

I have found out the same thing while updating our docs project and that made me updating Docusaurus, which is using a newer version of Babel. It worked, but maybe it’s still a configuration (plug-ins, etc.) problem.

[yuryturing]

@radekmie It only depends on if you will compile dependencies or not. CRA based apps do it. So it will likely create a problem with any cra based application. I will try to come up with a repo demonstrating the issue.

[Tarabyte]

@radekmie here you go. A repo demonstrating the issue https://github.com/Tarabyte/uniforms-cra-issue. It is using

• uniforms@2.6.0
• uniforms-antd@2.6.0
• uniforms-bridge-json-schema@2.6.0

The issue arise when compiling the production build. Try yarn serve.

[radekmie]

Thanks, @Tarabyte. As I can see, it's the same issue as @yuryturing has already reported to Babel.

[yuryturing]

@radekmie Yeah, that's my personal account :) @Tarabyte === @yuryturing Just made a repo as promised so we could check the fix later ;)

[radekmie]

Sure thing. It just hit me though - it's a TypeScript bug, not a Babel one, as we do use tsc to get that ES6 build. I've also prepared a reproduction, so I'll report is now.

[yuryturing]

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=

[radekmie]

Right, I thought that maybe it's not spec-compliant, but after a few checks it's all fine - Babel step fails.

[chomamateusz]

Same issue on 2.6.1. With 2.5.0 works.

[p1Machado]

I had to rollback from 2.6.0 to 2.5.0 to avoid that undefined error. But after that run into the issue #641 in my tests:

ReferenceError: globalThis is not defined

   7 | import { clientesSelector } from "app/features/clientes/clienteSlice";
   8 | 
>  9 | import { AutoForm, AutoField, SelectField } from "uniforms-material";
     | ^
  10 | 
  11 | const ProjetoSchema = createFormSchema(schema);
  12 | 

  at Object.<anonymous> (node_modules/uniforms-material/DateField.js:8:23)
  at Object.<anonymous> (node_modules/uniforms-material/AutoField.js:8:43)
  at Object.<anonymous> (node_modules/uniforms-material/AutoFields.js:6:43)
  at Object.<anonymous> (node_modules/uniforms-material/index.js:3:20)
  at Object.<anonymous> (src/app/features/projetos/ProjetoForm.jsx:9:1)
  at Object.<anonymous> (src/app/features/projetos/index.js:1:1)
  at Object.<anonymous> (src/App.tsx:10:1)
  at Object.<anonymous> (src/App.test.js:5:1) `

[radekmie]

@chomamateusz Have you tried it with the latest uniforms and Babel? We do use uniforms in our docs (duh!) and it just works.
@p1Machado #641 got fixed in #645 and got released in v2.6.1.

[p1Machado]

@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.

:/

[p1Machado]

@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.

:/

I was using node 10 in my ci runner, which doesn't have globalThis. Upgrading to node 12 works.
But, i'm still waiting for some updates on that TypeError ;s

[radekmie]

Babel is not really into solving our issue, therefore I'll work on a workaround tomorrow.

[radekmie]

Fixed by 1df4a88 and released in v2.6.6.

[atcg01]

Hi,
Same problem occur with uniforms-bootstrap4

TypeError: Cannot read property 'prototype' of undefined
at t.value (BaseForm.js:38)
at t.value (QuickForm.js:28)
at t.value (ValidatedForm.js:68)
at t.value (AutoForm.js:60)
at t.value (BaseForm.js:283)

[ziedmahdi]

@atcg01 I m running into the same problem, did you find a solution?

[ziedmahdi]

for my case, as a workaround, I had to downgrade to version 2.5.0

[radekmie]

Hi @atcg01. I somehow missed your message! Thanks, @ziedmahdi for this ping. Yeah, I see it may cause problems in the same way. And as I see, the Babel issue is not yet fixed. OK then, could any of you file a new issue? We'd take care of it soon.