[RFC] Support for react native web

[zomars]

Any plans to implement this? As for now I'm getting this error:

./node_modules/react-native-clean-form/src/Select.js
Module parse failed: Unexpected token (102:6)
You may need an appropriate loader to handle this file type.
|       valueKey,
|       theme,
|       ...rest
|     } = this.props
|     const { showSelector, value } = this.state

I think this is a transpilation issue similar to this one.

[zomars]

Trying to dig deeper it seems that webpack is complaining of spread operators:

Full console log:

``` ActionsContainer.js:15 Uncaught Error: Module parse failed: Unexpected token (50:68) You may need an appropriate loader to handle this file type. | | const Button = props => { | const { children : label, icon, iconPlacement, submitting, theme, ...rest } = props | | const Touchable = Platform.OS === 'android' at Object../node_modules/react-native-clean-form/src/Button.js (ActionsContainer.js:15) at __webpack_require__ (bootstrap 78dc8ab288a34ff8d654:678) at fn (bootstrap 78dc8ab288a34ff8d654:88) at Object../node_modules/react-native-clean-form/index.js (index.js:1) at __webpack_require__ (bootstrap 78dc8ab288a34ff8d654:678) at fn (bootstrap 78dc8ab288a34ff8d654:88) at Object../src/components/ClientForm.js (Button.js:42) at __webpack_require__ (bootstrap 78dc8ab288a34ff8d654:678) at fn (bootstrap 78dc8ab288a34ff8d654:88) at Object../src/containers/CreateClient.js (ClientsTable.js:120) at __webpack_require__ (bootstrap 78dc8ab288a34ff8d654:678) at fn (bootstrap 78dc8ab288a34ff8d654:88) at Object../src/containers/CreateView.js (CreateOrder.js:28) at __webpack_require__ (bootstrap 78dc8ab288a34ff8d654:678) at fn (bootstrap 78dc8ab288a34ff8d654:88) at Object../src/App.js (fetch.js:461) at __webpack_require__ (bootstrap 78dc8ab288a34ff8d654:678) at fn (bootstrap 78dc8ab288a34ff8d654:88) at Object../src/index.js (index.js:1) at __webpack_require__ (bootstrap 78dc8ab288a34ff8d654:678) at fn (bootstrap 78dc8ab288a34ff8d654:88) at Object.0 (configureStore.js:13) at __webpack_require__ (bootstrap 78dc8ab288a34ff8d654:678) at ./node_modules/ansi-regex/index.js.module.exports (bootstrap 78dc8ab288a34ff8d654:724) at bootstrap 78dc8ab288a34ff8d654:724 ./node_modules/react-native-clean-form/src/Button.js @ ActionsContainer.js:15 __webpack_require__ @ bootstrap 78dc8ab288a34ff8d654:678 fn @ bootstrap 78dc8ab288a34ff8d654:88 ./node_modules/react-native-clean-form/index.js @ index.js:1 __webpack_require__ @ bootstrap 78dc8ab288a34ff8d654:678 fn @ bootstrap 78dc8ab288a34ff8d654:88 ./src/components/ClientForm.js @ Button.js:42 __webpack_require__ @ bootstrap 78dc8ab288a34ff8d654:678 fn @ bootstrap 78dc8ab288a34ff8d654:88 ./src/containers/CreateClient.js @ ClientsTable.js:120 __webpack_require__ @ bootstrap 78dc8ab288a34ff8d654:678 fn @ bootstrap 78dc8ab288a34ff8d654:88 ./src/containers/CreateView.js @ CreateOrder.js:28 __webpack_require__ @ bootstrap 78dc8ab288a34ff8d654:678 fn @ bootstrap 78dc8ab288a34ff8d654:88 ./src/App.js @ fetch.js:461 __webpack_require__ @ bootstrap 78dc8ab288a34ff8d654:678 fn @ bootstrap 78dc8ab288a34ff8d654:88 ./src/index.js @ index.js:1 __webpack_require__ @ bootstrap 78dc8ab288a34ff8d654:678 fn @ bootstrap 78dc8ab288a34ff8d654:88 0 @ configureStore.js:13 __webpack_require__ @ bootstrap 78dc8ab288a34ff8d654:678 ./node_modules/ansi-regex/index.js.module.exports @ bootstrap 78dc8ab288a34ff8d654:724 (anonymous) @ bootstrap 78dc8ab288a34ff8d654:724 index.js:2177 ./node_modules/react-native-clean-form/src/Select.js Module parse failed: Unexpected token (102:6) You may need an appropriate loader to handle this file type. | valueKey, | theme, | ...rest | } = this.props | const { showSelector, value } = this.state __stack_frame_overlay_proxy_console__ @ index.js:2177 handleErrors @ webpackHotDevClient.js:176 ./node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:209 ./node_modules/sockjs-client/lib/event/eventtarget.js.EventTarget.dispatchEvent @ eventtarget.js:51 (anonymous) @ main.js:274 ./node_modules/sockjs-client/lib/main.js.SockJS._transportMessage @ main.js:272 ./node_modules/sockjs-client/lib/event/emitter.js.EventEmitter.emit @ emitter.js:50 WebSocketTransport.ws.onmessage @ websocket.js:35 index.js:2177 ./node_modules/react-native-clean-form/src/redux-form/createInputs.js Module parse failed: Unexpected token (13:44) You may need an appropriate loader to handle this file type. | | const createInputs = inputCreator => { | const renderInput = ({ input: { onChange, ...restInput }, placeholder}) => ( | | ) __stack_frame_overlay_proxy_console__ @ index.js:2177 handleErrors @ webpackHotDevClient.js:176 ./node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:209 ./node_modules/sockjs-client/lib/event/eventtarget.js.EventTarget.dispatchEvent @ eventtarget.js:51 (anonymous) @ main.js:274 ./node_modules/sockjs-client/lib/main.js.SockJS._transportMessage @ main.js:272 ./node_modules/sockjs-client/lib/event/emitter.js.EventEmitter.emit @ emitter.js:50 WebSocketTransport.ws.onmessage @ websocket.js:35 index.js:2177 ./node_modules/react-native-clean-form/src/Fieldset.js Module parse failed: Unexpected token (18:31) You may need an appropriate loader to handle this file type. | } | | const FieldsetLabel = props => { props.children } | | const FieldsetWrapper = styled.View` __stack_frame_overlay_proxy_console__ @ index.js:2177 handleErrors @ webpackHotDevClient.js:176 ./node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:209 ./node_modules/sockjs-client/lib/event/eventtarget.js.EventTarget.dispatchEvent @ eventtarget.js:51 (anonymous) @ main.js:274 ./node_modules/sockjs-client/lib/main.js.SockJS._transportMessage @ main.js:272 ./node_modules/sockjs-client/lib/event/emitter.js.EventEmitter.emit @ emitter.js:50 WebSocketTransport.ws.onmessage @ websocket.js:35 index.js:2177 ./node_modules/react-native-clean-form/src/redux-form/createInputCreator.js Module parse failed: Unexpected token (20:38) You may need an appropriate loader to handle this file type. | | const render = renderComponent => props => { | const { border, input : { onChange, ...restInput }, label, inlineLabel, theme, meta: { touched, error } } = props | | return ( __stack_frame_overlay_proxy_console__ @ index.js:2177 handleErrors @ webpackHotDevClient.js:176 ./node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:209 ./node_modules/sockjs-client/lib/event/eventtarget.js.EventTarget.dispatchEvent @ eventtarget.js:51 (anonymous) @ main.js:274 ./node_modules/sockjs-client/lib/main.js.SockJS._transportMessage @ main.js:272 ./node_modules/sockjs-client/lib/event/emitter.js.EventEmitter.emit @ emitter.js:50 WebSocketTransport.ws.onmessage @ websocket.js:35 index.js:2177 ./node_modules/react-native-clean-form/src/Form.js Module parse failed: Unexpected token (24:22) You may need an appropriate loader to handle this file type. | | render() { | const { children, ...rest } = this.props | | return ( __stack_frame_overlay_proxy_console__ @ index.js:2177 handleErrors @ webpackHotDevClient.js:176 ./node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:209 ./node_modules/sockjs-client/lib/event/eventtarget.js.EventTarget.dispatchEvent @ eventtarget.js:51 (anonymous) @ main.js:274 ./node_modules/sockjs-client/lib/main.js.SockJS._transportMessage @ main.js:272 ./node_modules/sockjs-client/lib/event/emitter.js.EventEmitter.emit @ emitter.js:50 WebSocketTransport.ws.onmessage @ websocket.js:35 index.js:2177 ./node_modules/react-native-clean-form/src/Label.js Module parse failed: Unexpected token (30:4) You may need an appropriate loader to handle this file type. | | return ( | | { children } | __stack_frame_overlay_proxy_console__ @ index.js:2177 handleErrors @ webpackHotDevClient.js:176 ./node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:209 ./node_modules/sockjs-client/lib/event/eventtarget.js.EventTarget.dispatchEvent @ eventtarget.js:51 (anonymous) @ main.js:274 ./node_modules/sockjs-client/lib/main.js.SockJS._transportMessage @ main.js:272 ./node_modules/sockjs-client/lib/event/emitter.js.EventEmitter.emit @ emitter.js:50 WebSocketTransport.ws.onmessage @ websocket.js:35 index.js:2177 ./node_modules/react-native-clean-form/src/Button.js Module parse failed: Unexpected token (50:68) You may need an appropriate loader to handle this file type. | | const Button = props => { | const { children : label, icon, iconPlacement, submitting, theme, ...rest } = props | | const Touchable = Platform.OS === 'android' __stack_frame_overlay_proxy_console__ @ index.js:2177 handleErrors @ webpackHotDevClient.js:176 ./node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:209 ./node_modules/sockjs-client/lib/event/eventtarget.js.EventTarget.dispatchEvent @ eventtarget.js:51 (anonymous) @ main.js:274 ./node_modules/sockjs-client/lib/main.js.SockJS._transportMessage @ main.js:272 ./node_modules/sockjs-client/lib/event/emitter.js.EventEmitter.emit @ emitter.js:50 WebSocketTransport.ws.onmessage @ websocket.js:35 index.js:2177 ./node_modules/react-native-clean-form/src/FormGroup.js Module parse failed: Unexpected token (60:26) You may need an appropriate loader to handle this file type. | | return React.cloneElement(child, Object.assign({}, child.props, { | inlineLabel, theme, ...subsetOfProps | })) | }) __stack_frame_overlay_proxy_console__ @ index.js:2177 handleErrors @ webpackHotDevClient.js:176 ./node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:209 ./node_modules/sockjs-client/lib/event/eventtarget.js.EventTarget.dispatchEvent @ eventtarget.js:51 (anonymous) @ main.js:274 ./node_modules/sockjs-client/lib/main.js.SockJS._transportMessage @ main.js:272 ./node_modules/sockjs-client/lib/event/emitter.js.EventEmitter.emit @ emitter.js:50 WebSocketTransport.ws.onmessage @ websocket.js:35 index.js:2177 ./node_modules/react-native-clean-form/src/Input.js Module parse failed: Unexpected token (71:6) You may need an appropriate loader to handle this file type. | render() { | return ( |

[markusguenther]

At the moment their is no plan. We are behind many dependencies. So think we should first overhaul this before this could be a topic.