Invariant Violation with Webpack + Babel

[Vpr99]

I'm getting the following error when I run my app:

Uncaught Error: Invariant Violation: Form.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object.

Right now, I'm just trying to get the 'working example' from the docs to work properly with my setup. I'm currently using Babel and Webpack, which I believe is the root cause of the problem. I've tried removing the <Form ref="form" type={Person} /> and everything works correctly, so I know that the problem lies somewhere in my configuration conflicting with tcomb-form.

import React from 'react';
import t from 'tcomb-form';

var Form = t.form.Form;
var Person = t.struct({
    name: t.Str,
    surname: t.Str
});

export default class App extends React.Component {
    save() {
        // call getValue() to get the values of the form
        var value = this.refs.form.getValue();
        // if validation fails, value will be null
        if (value) {
            // value here is an instance of Person
            console.log(value);
        }
    }

    render() {
        return(
            <div>
                <Form ref="form" type={Person} />
                <button onClick={this.save}>Save</button>
            </div>
        )
    }
}

I'd also be happy to provide configs or files for anything else if useful. Thanks in advance.

[escapedcat]

This works for me (at least the form renders). I'm using Webpack with the babel-loader.

webpack.config.js

    ...
    module: {
        loaders: [
            {
                //tell webpack to use jsx-loader for all *.jsx files
                test: /\.jsx$/,
                loader: 'jsx-loader?insertPragma=React.DOM&harmony'
            },
            {
                test: /\.jsx$/, exclude: /node_modules/, loader: "babel-loader"
            }
        ]
    },
    ...

package.json

...
  "dependencies": {
    "react": "^0.13.3",
    "react-router": "^1.0.0-rc1",
    "tcomb-form": "^0.7.1"
  },
  "devDependencies": {
    "babel-core": "^5.8.24",
    "babel-loader": "^5.3.2",
    "http-server": "^0.8.0",
    "jsx-loader": "^0.13.2",
    "webpack": "^1.12.1",
    "webpack-dev-server": "^1.10.1"
  }
...

I just started a basic run through setup of a react project. It's just a log for me how I moved and I'm not done yet, because I only continue when I have some spare time. But maybe it helps: https://github.com/escapedcat/react-experience

[gcanti]

Hi, If you are using react ^0.13.0 you should install tcomb-form ^0.6.4.

https://github.com/gcanti/tcomb-form/issues/199

[Vpr99]

Ah. Versioning it was. Updated to 0.14 RC1 and that fixed it. Thank you so much.

[rorykoehein]

I'm having problems with tcomb-form 0.6.6 wanting to use React 0.14.x, but only when I use npm shrinkwrap

Here's how to reproduce

npm init
npm install tcomb-form@0.6.6 --save
npm install react@0.13.x --save
npm shrinkwrap
rm -rf node_modules
npm install

output npm install:

npm WARN package.json tcomb-test@1.0.0 No description
npm WARN package.json tcomb-test@1.0.0 No repository field.
npm WARN package.json tcomb-test@1.0.0 No README data
react@0.13.3 node_modules/react
└── envify@3.4.0 (through@2.3.8, jstransform@10.1.0)

tcomb-form@0.6.6 node_modules/tcomb-form
├── classnames@2.2.0
├── uvdom-bootstrap@0.2.4
├── tcomb-validation@2.2.0 (tcomb@2.5.1)
├── react@0.14.0 (envify@3.4.0, fbjs@0.3.2)
└── uvdom@0.1.2 (classnames@1.2.2)

As you see react@0.14.0 is now installed as a dependency of tcomb-form... And the application breaks with above stated error.

But when using tcomb-form 0.6.3 it works as I think it should:

npm init
npm install tcomb-form@0.6.3 --save
npm install react@0.13.x --save
npm shrinkwrap
rm -rf node_modules
npm install

Output:

react@0.13.3 node_modules/react
└── envify@3.4.0 (through@2.3.8, jstransform@10.1.0)

tcomb-form@0.6.3 node_modules/tcomb-form
├── uvdom@0.1.2
├── classnames@1.2.2
├── uvdom-bootstrap@0.2.4
├── debug@2.2.0 (ms@0.7.1)
└── tcomb-validation@2.2.0 (tcomb@2.5.1)

[gcanti]

Hi @nextminds! Thanks for your feedback. Just released a new version of uvdom 0.1.x moving the react dependency from peerDependencies to dependencies, should be ok now