undefined vtree

app.js

import {h} from '@cycle/dom';
import xs from 'xstream';

import Login from 'login';

let app = function(sources) {
    return {
      DOM: Login(sources).DOM
    };
}

export default app;

login.js

import {h} from '@cycle/dom';
import xs from 'xstream';

import styles from './styles.less';

let dataIni = {
	    email: '',
	    password: '',
		remember: null
	},
	stateIni = {
		alerts: [],
		submitting: false,
		data: dataIni
	};

const Login = ({DOM, state$ = xs.of(stateIni)}) => {
	let render = (state) => {
			return h('form', {props: {className: [styles.form, styles.formHorizontal].join(' ')}}, [
				h('fieldset', [
					// show alerts if there's any
					state.alerts.length ? h('div.alerts',
						state.alerts.map(alert => h(`div.alert.${alert.className}`, alert.text))
					) : '',
					h(`legend.${styles.legend}`, 'Login'),
					h(`div.${styles.field}`, [
						h(`label`, 'Email'),
						h(`div`, [
							h('input#email', {props: {type: 'email', name: 'email', className: styles.control}})
						])
					]),
					h(`div.${styles.field}`, [
						h(`label`, 'Password'),
						h(`div`, [
							h('input#password', {props: {type: 'password', name: 'password', className: styles.control}})
						])
					]),
					h(`div`, [
						h(`button.${styles.submit}`, {props: {type: 'button', disabled: state.submitting}}, [
							state.submitting
								? h(`i`, {props: {className: [
									styles.fa,
									styles.faSpinner,
									styles.faSpin
								].join(' ')}})
								: h(`i`, {props: {className: [
									styles.fa,
									styles.faSignIn
								].join(' ')}}),
							state.submitting ? ' Logging in...' : ' Login'
						])
					])
				])
			])
		},

	form$ = xs.of(stateIni).map(render);

	// return the DOM for rendering and the state just in case the parent wants to access it
	return {
		//DOM: form$, // returns undefined
		DOM: render(stateIni), // returns vtree as expected
		state$
	}
};

export default Login;