madvas / cljs-react-material-ui

Clojurescript library for using material-ui.com
Eclipse Public License 1.0
205 stars 32 forks source link

Tabs broken (Reagent) after upgrading from 0.2.21 to 0.2.25 #18

Closed tkataja closed 7 years ago

tkataja commented 7 years ago

Hi,

After updating from 0.2.21 to 0.2.25, Tabs component does not work anymore

Steps to Reproduce

Create a new Reagent frontend project:

lein new reagent-frontend material-ui-tabs

Add exclusions to reagent and add cljs-react-material-ui dependency to project.clj

[reagent "0.6.0" :exclusions [cljsjs/react]]
[cljs-react-material-ui "0.2.25"]

Open _src/material_uitabs/core.cljs, add deps and modify home-page fn to render some tabs

(:require [reagent.core :as reagent]
               ;; Add material ui deps
               [cljsjs.material-ui]
               [cljs-react-material-ui.core :as uic]
               [cljs-react-material-ui.reagent :as ui])

;; modify the home page
(defn home-page []
  [ui/mui-theme-provider {:mui-theme (uic/get-mui-theme)}
   [ui/tabs
    [ui/tab {:label "Foo" :value "foo"}
     [:p "Foo"]]
    [ui/tab {:label "Bar" :value "bar"}
     [:p "Bar"]]]])

Start figwheel

lein figwheel

Open the app (located in material-ui-tabs/public/index.html) and following error should appear in the console and tabs are not functioning

material-ui.inc.js:26210 Warning: Tabs only accepts Tab Components as children.
        Found function (props, context, updater) {
          // This constructor gets overridden by mocks. The argument is used
          // by mocks to assert on what gets mounted.

          if (true) {
             true ? warning(this instanceof Constructor, 'Something is calling a React component directly. Use a factory or ' + 'JSX instead. See: https://fb.me/react-legacyfactory') : void 0;
          }

          // Wire up auto-binding
          if (this.__reactAutoBindPairs.length) {
            bindAutoBindMethods(this);
          }

          this.props = props;
          this.context = context;
          this.refs = emptyObject;
          this.updater = updater || ReactNoopUpdateQueue;

          this.state = null;

          // ReactClasses doesn't have constructors. Instead, they use the
          // getInitialState and componentWillMount methods for initialization.

          var initialState = this.getInitialState ? this.getInitialState() : null;
          if (true) {
            // We allow auto-mocks to proceed as if they're returning null.
            if (initialState === undefined && this.getInitialState._isMockFunction) {
              // This is probably bad practice. Consider warning here and
              // deprecating this convenience.
              initialState = null;
            }
          }
          !(typeof initialState === 'object' && !Array.isArray(initialState)) ?  true ? invariant(false, 'undefined.getInitialState(): must return an object or null', Constructor.displayName || 'ReactCompositeComponent') : _prodInvariant('82', Constructor.displayName || 'ReactCompositeComponent') : void 0;

          this.state = initialState;
        } as child number 2 of Tabs

If I downgrade to 0.2.21 Tabs work correctly.

madvas commented 7 years ago

You're right. I didn't realise some recent changes were breaking it. This and also https://github.com/madvas/cljs-react-material-ui/issues/19 is fixed in 0.2.26

tkataja commented 7 years ago

Thank you for a very quick fix on this issue!