error: react-toolbox-themr with "LAYOUT"

[axlider]

ERROR

Uncaught TypeError: undefined is not a function themr.js:113 (anonymous function) themr.js:113 getNamespacedTheme themr.js:112 getTheme themr.js:132 calcTheme

Procedure

• run "react-toolbox-themr"
• configure LAYOUT in package.json

{
  "reactToolbox": {
    "include": [
      "BUTTON",
      "MENU",
      "LAYOUT",
      "INPUT",
      "DRAWER"
    ],
    "customProperties": {
      "animation-duration": "0.3s",
      "color-accent": "var(--palette-pink-a200)",
      "color-accent-dark": "var(--palette-pink-700)",
      "color-primary-contrast": "var(--color-dark-contrast)",
      "color-accent-contrast": "var(--color-dark-contrast)"
    },
    "output": "assets/react-toolbox"
  },

  "name": "VexplorerUIWeb",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "react-scripts": "0.8.5"
  },
  "dependencies": {
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-redux": "^5.0.2",
    "react-style-proptype": "^2.0.0",
    "react-toolbox": "2.0.0-beta.6",
    "react-toolbox-themr": "^1.0.2",
    "redux": "^3.6.0",
    "redux-thunk": "^2.2.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "toolbox": "react-toolbox-themr",
    "eject": "react-scripts eject"
  }
}

the id "LAYOUT" causes the error. Also i copied the complete Layout-Example from the Demo Page:

render() {
        return (
            <Layout>
                <NavDrawer active={this.props.navigation.drawerActive}
                           pinned={this.props.navigation.pinned} permanentAt='xxxl'
                           onOverlayClick={ this.toggleDrawerActive }>
                    <p>
                        Navigation, account switcher, etc. go here.
                    </p>
                </NavDrawer>
                <Panel>
                    <AppBar leftIcon='menu' onLeftIconClick={ this.toggleDrawerActive } />
                    <div style={{ flex: 1, overflowY: 'auto', padding: '1.8rem' }}>
                        <h1>Main Content</h1>
                        <p>Main content goes here.</p>
                    </div>
                </Panel>
                <Sidebar pinned={ this.props.navigation.sidebarPinned } width={ 5 }>
                    <div><IconButton icon='close' onClick={ this.toggleSidebar }/></div>
                    <div style={{ flex: 1 }}>
                        <p>Supplemental content goes here.</p>
                    </div>
                </Sidebar>
            </Layout>
        );
    }
}

• the menu button is not visible instead i see the label "MENU"
• events are not triggered after click on "close" and "menu" button

[mattzuba]

Were you able to figure this out? I think I'm running into the same issue. I'm not sure if it's an issue with the Layout component, or the generated css or js

[axlider]

unfortunately not. But you could be right. Maybe it is an issue with react-toolbox.

[javivelasco]

Gotta check it out, will try tomorrow!

[gergob]

is there any update on this? I have the same issue using "react-toolbox": "^2.0.0-beta.12"