Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tabs not showing on react-toolbox-example #56

Open
AleCaste opened this issue Aug 16, 2017 · 1 comment
Open

Tabs not showing on react-toolbox-example #56

AleCaste opened this issue Aug 16, 2017 · 1 comment

Comments

@AleCaste
Copy link

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

@AleCaste
Copy link
Author

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant