JSBin for tcomb-form

[benmonro]

Question: Is there a JSBin or JSFiddle that has tcomb-form already setup? I'd like to be able to create working examples using tcomb and be able to share them. I tried creating this one: http://jsbin.com/yogugimocu/edit?html,js,console,output

but I keep getting errors saying error Error: Invariant Violation: Form.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object.

[benmonro]

I had the wrong version of tcomb-form referenced. I got it working here:

http://jsbin.com/yogugimocu/edit?html,js,console,output it renders the form, but I still get some errors: error Error: Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. This usually means that you're trying to add a ref to a component that doesn't have an owner (that is, was not created inside of another component'srendermethod). Try rendering this component inside of a new top-level component which will hold the ref.

[benmonro]

looks like it could be related to this: https://github.com/gcanti/tcomb-form/issues/107

[benmonro]

updated to react 14: http://jsbin.com/vuwiba/2/edit?html,js,console,output

@gcanti any ideas about these errors?

[gcanti]

Hi,

You are using

<script src="//fb.me/react-with-addons-0.13.3.js"></script>

so you must build a standalone version of tcomb-form without react. With webpack it's something like:

var webpack = require('webpack');

var plugins = [
  new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }),
  new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify('development') })
];

module.exports = {

  entry: './node_modules/tcomb-form/index.js',

  output: {
    path: './dist',
    filename: 'tcomb-form.min.js',
    library: 'tcombForm',
    libraryTarget: "umd"
  },

  plugins: plugins,

  externals: {
    "react": "React" // <= exclude react from the build
  }

};

[gcanti]

Working example (react v0.13.3 tcomb-form v0.6.7) where I pasted the generated js:

http://jsbin.com/sobosative/edit?html,js,console,output