ctxhou/react-tabtab

New install: ActionButton.extend is not a function.

josefpohl opened this issue · 3 comments

Hi there,
Into my project I tossed some code just to see it in action which was basically a duplicate of the add and close. Upon running I received the following error.

85 | var ActionButtonStyle = _styledComponents2.default.div(_templateObject4, buttonWidth);
 86 | 
 87 | var makeScrollButton = function makeScrollButton(ActionButton) {
> 88 |   return ActionButton.extend(_templateObject5, function (props) {
 89 |     return props.left ? props.showModalButton ? 'left: ' + (buttonWidth + 2) + 'px' : 'left: 0' : 'right: 0';
 90 |   });
 91 | };

and

TabList.js:88 Uncaught TypeError: ActionButton.extend is not a function
    at makeScrollButton (TabList.js:88)
    at TabListComponent.render (TabList.js:353)
    at finishClassComponent (react-dom.development.js:13538)
    at updateClassComponent (react-dom.development.js:13501)
    at beginWork (react-dom.development.js:14090)
    at performUnitOfWork (react-dom.development.js:16416)
    at workLoop (react-dom.development.js:16454)
    at HTMLUnknownElement.callCallback (react-dom.development.js:145) ....

The issue was resolved by reverting back from styled-components 4.0.2 to 3.4.10.
Just FYI.

Hi there, Just wanted to update this with more information, should you decide to support styled-components v4.x
https://www.styled-components.com/docs/faqs#what-do-i-need-to-do-to-migrate-to-v4
and take note of bullet number 3.
Thanks for the project!

@josefpohl sure, we should use v4.

I neglect to transform completely styled-components from v3 to v4 in #107 .

It would be very helpful, if you could help us change the style of ActionButton to v4 spec. PR is welcome 😄

fix on #118