react-toolbox-example
react-toolbox-example copied to clipboard
Tabs not showing on react-toolbox-example
Hello. I installed the react-toolbox-example project and was able to use all the components without any problems. All of them except for the "Tabs" component. This component simply doesn't show. See this trivial App.js:
import React from 'react';
import { Button } from 'react-toolbox/lib/button';
//import { Tab, Tabs } from 'react-toolbox';
import { Tabs, Tab } from "react-toolbox/lib/tabs";
class App extends React.Component {
state = {
index: 0
};
setIndex = index => {
this.setState({ index });
};
render() {
return (
<div>
<div>[Tabs - start]</div>
<Tabs index={this.state.index} onChange={this.setIndex}>
<Tab label='Primary'><small>Primary content</small></Tab>
<Tab label='Secondary' onActive={this.handleActive}><small>Secondary content</small></Tab>
<Tab label='Third' disabled><small>Disabled content</small></Tab>
<Tab label='Fourth' hidden><small>Fourth content hidden</small></Tab>
<Tab label='Fifth'><small>Fifth content</small></Tab>
</Tabs>
<div>[Tabs - end]</div>
<Button label='Click on me!' raised primary />
</div>
);
}
}
export default App;
All I get on the screen is something like:
[Tabs - start]
[Tabs - end]
Click on me!
The Tabs and Tab objects are imported alright I think (at least they are not null). I tried to import them in 2 different ways (see code above) but the result is the same on both cases. I want to point out the fact that any other component I tried it worked without any issues (and I tried almost all of them!) Any ideas? Alex
Ok, I found what is causing the problem. What happened is that on index.js I commented out the following lines:
// import { overrideComponentTypeChecker } from 'react-toolbox';
...
...
/*overrideComponentTypeChecker((classType, reactElement) => (
reactElement && (
reactElement.type === classType
|| reactElement.type.name === classType.displayName
)
));*/
The reason being was that since webpack lacks of tree-shaking capabilities, the bundler was including the whole react-toolbox lib in my bundle for a final size of around 9MB (sourceMaps on). So I decided not to use the overrideComponentTypeChecker, which gave me a bundle size of 3MB. Much better!!!.... but... for some reason the Tabs component is NOT working after that (even after restarting webpack)
If I use overrideComponentTypeChecker then Tabs are working again. This ONLY happens with the Tabs component. All other components I have tried do work no matter I use overrideComponentTypeChecker or not.
Since react-toolbox-example is using v2.0.0-beta.5 or react-toolbox, I tried to upgrade it to v2.0.0-beta.11 but that did not help.
Anyone?