I am trying my very hardest to create a Dash Component without any knowledge of React. I’ve named my component LoginForm and its intent is to be a Dash component implementation of the react-native-plaid-link package on npm. I am currently getting the following error on npm run start:
ERROR in ./node_modules/react-native-plaid-link/index.js 30:6
Module parse failed: Unexpected token (30:6)
You may need an appropriate loader to handle this file type.
|
| return (
> <WebView
| {...omit(this.props, [
| 'publicKey',
@ ./src/lib/components/LoginForm.react.js 17:28-62
@ ./src/lib/index.js
@ ./src/demo/App.js
@ ./src/demo/index.js
@ multi ./src/demo/index.js
ℹ ｢wdm｣: Failed to compile.
I’ve read that this may have something to do with the webpack.config.js?
Below is my code:
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import PlaidAuthenticator from 'react-native-plaid-link'
export default class LoginForm extends Component {
render() {
const {id, data, environment, public_key, products} = this.props;
return (
<div id={id}>
<PlaidAuthenticator
onMessage={this.onMessage}
publicKey={public_key}
env={environment}
product={products}
clientName="Butters"
selectAccount={false}
/>
onMessage = (data) => {
this.setState({data})
}
</div>
);
}
}
LoginForm.defaultProps = {};
LoginForm.propTypes = {
/**
* The ID used to identify this component in Dash callbacks
*/
id: PropTypes.string,
/**
* The ID used to identify this component in Dash callbacks
*/
data: PropTypes.string,
/**
* Dash-assigned callback that should be called whenever any of the
* properties change
*/
setProps: PropTypes.func,
/**
*
*/
environment: PropTypes.string.isRequired,
/**
*
*/
public_key: PropTypes.string.isRequired,
/**
*
*/
products: PropTypes.string
};
And for convenience, the react-native-plaid-link index.js:
import React, { Component } from 'react';
import { WebView } from 'react-native';
import { PropTypes } from 'prop-types';
import omit from 'object.omit';
class PlaidAuthenticator extends Component {
render() {
const {
publicKey,
selectAccount,
env,
product,
clientName,
webhook,
style,
token
} = this.props;
let uri = `https://cdn.plaid.com/link/v2/stable/link.html?key=${
publicKey
}&apiVersion=v2&env=${env}&product=${product}&clientName=${
clientName
}&isWebView=true&isMobile=true&selectAccount=${
selectAccount
}`;
uri = token !== undefined ? `${uri}&token=${token}` : uri;
uri = webhook !== undefined ? `${uri}&webhook=${webhook}` : uri;
return (
<WebView
{...omit(this.props, [
'publicKey',
'selectAccount',
'env',
'product',
'clientName',
'webhook',
'token',
'ref'
])}
ref={this.props.plaidRef}
source={{ uri }}
onMessage={this.onMessage}
/>
);
}
onMessage = e => {
/*
Response example for success
{
"action": "plaid_link-undefined::connected",
"metadata": {
"account": {
"id": null,
"name": null
},
"account_id": null,
"public_token": "public-sandbox-e697e666-9ac2-4538-b152-7e56a4e59365",
"institution": {
"name": "Chase",
"institution_id": "ins_3"
}
}
}
*/
this.props.onMessage(JSON.parse(e.nativeEvent.data));
};
}
PlaidAuthenticator.propTypes = {
publicKey: PropTypes.string.isRequired,
onMessage: PropTypes.func.isRequired,
env: PropTypes.string.isRequired,
product: PropTypes.string.isRequired,
clientName: PropTypes.string,
webhook: PropTypes.string,
plaidRef: PropTypes.func
};
PlaidAuthenticator.defaultProps = {
clientName: '',
plaidRef: () => {}
};
export default PlaidAuthenticator;
Im sure there is some simple React caveat for at least the current error I am receiving? I appreciate all help, thanks
