[Bug] Styleguide fatal error when the component name is equal to "Map"

[kopax]

I want to generate a styleguide for my lib.

This is my Map component:

import styled from 'styled-components';

const Map = styled.map`
  display: inline;
`;

/** @component */
export default Map;

Expected

Generate a fully working styleguide

Result

The search in the left menu has a javascript Error:

My chrome console output the following error when I type in the search input:

Uncaught TypeError: existingChildren.set is not a function
    at mapRemainingChildren (react-dom.development.js:8658)
    at reconcileChildrenArray (react-dom.development.js:9149)
    at reconcileChildFibers (react-dom.development.js:9495)
    at reconcileChildrenAtPriority (react-dom.development.js:10135)
    at reconcileChildren (react-dom.development.js:10118)
    at updateHostComponent (react-dom.development.js:10370)
    at beginWork (react-dom.development.js:10609)
    at performUnitOfWork (react-dom.development.js:12573)
    at workLoop (react-dom.development.js:12682)
    at HTMLUnknownElement.callCallback (react-dom.development.js:1299)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:1338)
    at invokeGuardedCallback (react-dom.development.js:1195)
    at performWork (react-dom.development.js:12800)
    at batchedUpdates (react-dom.development.js:13244)
    at performFiberBatchedUpdates (react-dom.development.js:1646)
    at stackBatchedUpdates (react-dom.development.js:1637)
    at batchedUpdates (react-dom.development.js:1651)
    at Object.batchedUpdatesWithControlledComponents [as batchedUpdates] (react-dom.development.js:1664)
    at dispatchEvent (react-dom.development.js:1874)
mapRemainingChildren @ react-dom.development.js:8658
reconcileChildrenArray @ react-dom.development.js:9149
reconcileChildFibers @ react-dom.development.js:9495
reconcileChildrenAtPriority @ react-dom.development.js:10135
reconcileChildren @ react-dom.development.js:10118
updateHostComponent @ react-dom.development.js:10370
beginWork @ react-dom.development.js:10609
performUnitOfWork @ react-dom.development.js:12573
workLoop @ react-dom.development.js:12682
callCallback @ react-dom.development.js:1299
invokeGuardedCallbackDev @ react-dom.development.js:1338
invokeGuardedCallback @ react-dom.development.js:1195
performWork @ react-dom.development.js:12800
batchedUpdates @ react-dom.development.js:13244
performFiberBatchedUpdates @ react-dom.development.js:1646
stackBatchedUpdates @ react-dom.development.js:1637
batchedUpdates @ react-dom.development.js:1651
batchedUpdatesWithControlledComponents @ react-dom.development.js:1664
dispatchEvent @ react-dom.development.js:1874
react-dom.development.js:12990 Uncaught TypeError: capturedErrors.set is not a function
    at captureError (react-dom.development.js:12990)
    at performWork (react-dom.development.js:12825)
    at batchedUpdates (react-dom.development.js:13244)
    at performFiberBatchedUpdates (react-dom.development.js:1646)
    at stackBatchedUpdates (react-dom.development.js:1637)
    at batchedUpdates (react-dom.development.js:1651)
    at Object.batchedUpdatesWithControlledComponents [as batchedUpdates] (react-dom.development.js:1664)
    at dispatchEvent (react-dom.development.js:1874)

If I rename my component like this it work :

import styled from 'styled-components';

const Mapp = styled.map`
  display: inline;
`;

/** @component */
export default Mapp;

It seems there is a clash name with the Map and your code

Version : 6.2.3

[sapegin]

That’s because we’re exposing all component as global variables. It’s not ideal and possible to fix, but nobody has time to do that yet.

There’s an issue for that already: #325. Feel free to send a pull request, I think there’s already some proposed solution ;-)