T.maybe is throwing path.join error

[dom-devel]

Whats the problem?

When I try to use t.maybe I get the following error on attempting to render the react component.

create.js:18 Uncaught TypeError: path.join is not a function
    at create.js:18
    at assert (assert.js:9)
    at create (create.js:18)
    at ?Select (maybe.js:37)
    at mountIndeterminateComponent (react-dom.development.js:14811)
    at beginWork (react-dom.development.js:15316)
    at performUnitOfWork (react-dom.development.js:18150)
    at workLoop (react-dom.development.js:18190)
    at renderRoot (react-dom.development.js:18276)
    at performWorkOnRoot (react-dom.development.js:19165)

Path in this case I believe is an empty {}.

It's happening in the following react component. I have 3 optional fields (column0 1 & 2). I hide and show them based on other parts of the form (all that code isn't shown for brevity).

I'm hiding them based on CSS classes, but I need to set them to be optional to allow a user to submit the form.

// Create a form
const Form = t.form.Form;
t.form.Form.templates = templates;

const kwProjectTComb = t.struct({
    name: t.String,
    colSep: t.String,
    column0: t.String,
    column1: t.String,
    column2: t.String,
    data: t.String
});

const columnOptions = [
    { value: "option1", text: "Option 1" },
    { value: "option2", text: "Option 2" },
];

class CreateForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            formValues: {
                colSep: "\t"
            },
            tCombOptions: {
                auto: "placeholders",
                fields: {
                    name: {
                        error: "Please enter a project name."
                    },
                    column0: {
                        factory: t.maybe(t.form.Select),
                        options: columnOptions,
                        nullOption: {
                            value: "",
                            text: `Choose data in column 0`
                        },
                        attrs: {
                            hidden: true
                        }
                    }
                }
            }
        };
    }
    render() {
        return (
            <Form
                ref={ref => {
                    this.kwProjectForm = ref;
                }}
                type={kwProjectTComb}
                options={this.state.tCombOptions}
                value={this.state.formValues}
                onChange={this.onFormChange}
            />
        );
    }
}

Version info:

• tcomb-form: "^0.9.21",
• A custom template: https://github.com/dom-devel/tcomb-form-templates-bulma
  • It's essentially the bootstrap template, but with changed class names.