babelPluginFlowReactPropTypes_proptype_Element is not defined

[rosskevin]

Source (mimicing result of findDOMNode()):

/**
 * return type of ReactDOM.findDOMNode()
 *
 * NOTE: `Element` is NOT the same as `type { Element } from 'react'` a.k.a React$Element
 *
 * To use it as a typical node, check with `if (node instanceof HTMLElement) { ... }`
 */
export type DOMNode = Element | Text | null;

Usage is causing:

types.js:15 Uncaught ReferenceError: babelPluginFlowReactPropTypes_proptype_Element is not defined
    at Object.defineProperty.value (types.js:15)
    at __webpack_require__ (bootstrap 67889448ccd6ec73efec:49)
    at Object.<anonymous> (Transition.js:67)
    at __webpack_require__ (bootstrap 67889448ccd6ec73efec:49)
    at Object.defineProperty.value (Fade.js:45)
    at __webpack_require__ (bootstrap 67889448ccd6ec73efec:49)
    at Object.defineProperty.value (Modal.js:90)
    at __webpack_require__ (bootstrap 67889448ccd6ec73efec:49)
    at Object.defineProperty.value (Dialog.js:36)
    at __webpack_require__ (bootstrap 67889448ccd6ec73efec:49)

/see mui/material-ui#7400

Does use of the DOM Element require an explicit import type for compatibility with this plugin?

[rosskevin]

It seems like we are missing a declaration or require for

Here is the entire build file for that:

"use strict";

/**
 * return type of ReactDOM.findDOMNode()
 *
 * NOTE: `Element` is NOT the same as `type { Element } from 'react'` a.k.a React$Element
 *
 * To use it as a typical node, check with `if (node instanceof HTMLElement) { ... }`
 */
if (typeof exports !== "undefined") Object.defineProperty(exports, "babelPluginFlowReactPropTypes_proptype_DOMNode", {
  value:
    require("prop-types").oneOfType(
      [
        typeof babelPluginFlowReactPropTypes_proptype_Element === "function" ? babelPluginFlowReactPropTypes_proptype_Element : require("prop-types").shape(babelPluginFlowReactPropTypes_proptype_Element),
        typeof Text === "function" ? require("prop-types").instanceOf(Text) : require("prop-types").any
      ]
    ),
  configurable: true
});

Nowhere in this file is babelPluginFlowReactPropTypes_proptype_Element declared or required.

[rosskevin]

Compared to when we encounter import type { Element } from 'react', which generates:

var babelPluginFlowReactPropTypes_proptype_Element = require('react').babelPluginFlowReactPropTypes_proptype_Element || require('prop-types').any;

It seems like this plugin isn't recognizing global types from the dom. Am I on the right track?

[brigand]

Yeah, we don't have a list of global types.

So, currently the solution is:

const Element = window.Element;

type FooProps = {
  element: Element,
}

class Foo extends React.Component {
  props: FooProps;

  render() { return null; }
}

This does an instanceOf check.

element: typeof Element === \\"function\\" 
  ? require(\\"prop-types\\").instanceOf(Element).isRequired 
  : require(\\"prop-types\\").any.isRequired

Are you thinking to have a list of global types flow supports, and do instanceOf checks on them if no type with that name is imported or defined?

[rosskevin]

Thanks for the workaround. I was wondering what to do, it seems a bit overzealous to interpret as a global if not defined, but I guess that's how it works in the browser anyway.

So, I think implementing a whitelisted set of globals could be the correct solution here.

[rosskevin]

It seems the workaround didn't work.

Source:

const Element = window.Element;
const Text = window.Text;
export type DOMNode = Element | Text | null;

build:

var Element = window.Element;
var Text = window.Text;
if (typeof exports !== "undefined") Object.defineProperty(exports, "babelPluginFlowReactPropTypes_proptype_DOMNode", {
  value:
    require("prop-types").oneOfType([
      typeof babelPluginFlowReactPropTypes_proptype_Element === "function" ? babelPluginFlowReactPropTypes_proptype_Element : require("prop-types").shape(babelPluginFlowReactPropTypes_proptype_Element),
      typeof Text === "function" ? require("prop-types").instanceOf(Text) : require("prop-types").any
    ]),
  configurable: true
});