React-router: ReferenceError: Element is not defined

Created on 2 Mar 2019  路  6Comments  路  Source: ReactTraining/react-router

/react-router-dom/cjs/react-router-dom.js:209
current: PropTypes.instanceOf(Element)

ReferenceError: Element is not defined

Version: 4.4.0-beta.7

Most helpful comment

@timdorr we're 2 weeks on, any chance of a beta.8 that fixes this?

All 6 comments

Fixed by #6607

Just merged that in. Should be released soonish.

Is this fix in new version?
I can't see it fixed in version 4.4.0-beta.7 when install it with npm.

Now i manually paste var Element = typeof Element === "undefined" ? function () {} : Element; in node_modules/react-router-dom/cjs/react-router-dom.js at 208s

It's NOT FIXED in 4.4.0-beta.7!!!

The issue is that rollup removes unused code. It considers adding const Element = typeof Element === "undefined" ? function () {} : Element; as unused and unneccesary for the compiled source.

The crashing issue emanates from this line:

    PropTypes.shape({ current: PropTypes.any })

Using PropTypes.any seems to trigger a PropTypes.instanceOf(Element) validation call. Since Element is undefined, it crashes. A solution I'm currently using is to include a globally scoped Element variable:

modules/Element.js

const Element = typeof Element === "undefined" ? function() {} : Element;

export default Element;

Then including the file into

modules/index.js

export { default as Element } from "./Element";
export { default as BrowserRouter } from "./BrowserRouter";
export { default as HashRouter } from "./HashRouter";
export { default as Link } from "./Link";
export { default as NavLink } from "./NavLink";

Update: It looks the above isn't required. The error will be fixed in an up-and-coming release, however, the fix they've implemented is simpler:

  const toType = PropTypes.oneOfType([PropTypes.string, PropTypes.object]);
  const Element = typeof Element === "undefined" ? function() {} : Element;
  const innerRefType = PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.func,
    PropTypes.shape({ current: PropTypes.instanceOf(Element) })
  ]);

I've published a temporary fix in the meantime. Once react-router-dom is updated, do NOT use this fix.

@timdorr we're 2 weeks on, any chance of a beta.8 that fixes this?

Was this page helpful?
0 / 5 - 0 ratings