Why am I getting "unused default export" error?
10,439
In your index.js
, you have exported the action emailChanged
as a named export and you are again exporting the same as default
. However you are only importing it as a named import. Thats the reason for your error.
Remove the default export for emailChanged
.
import {EMAIL_CHANGED} from './types';
export const emailChanged = (text) => {
return {
type: 'EMAIL_CHANGED',
payload: text
};
};
onEmailChange = (text) => {
this.props.emailChanged(text);
};
However, I assume that your intension was to export default onEmailChange
function.
In that case change add
export default onEmailChange
to the index.js
file.
Author by
van jok
Updated on June 20, 2022Comments
-
van jok almost 2 years
I don't get how I'm getting
unused default export
error whenever I hover overexport default emailChanged;
in myindex.js
file. I'm assuming this is why my code won't run in the simulator.Here's
LoginForm.js
:import React, {Component} from 'react'; import {connect} from 'react-redux'; import {emailChanged} from 'TorusTeensApp/src/actions'; import {Text, StyleSheet, KeyboardAvoidingView, TextInput, TouchableOpacity} from 'react-native'; class LoginForm extends Component { onEmailChange(text) { this.props.emailChanged(text); } render() { return( <KeyboardAvoidingView style={styles.container}> <TextInput style={styles.userInput} onsubmitediting={() => this.passwordInput.focus()} returnKeyType={"next"} placeholder={"Email"} label={"Email"} keyboardType={"email-address"} autoCorrect={false} onChangeText={this.onEmailChange.bind(this)} value={this.props.email} /> <TextInput style={styles.userInput} ref={(userInput) => this.passwordInput = userInput} returnKeyType={"go"} placeholder={"Password"} label={"Password"} secureTextEntry /> <TouchableOpacity style={styles.buttonContainer}> <Text style={styles.buttonText}>Login</Text> </TouchableOpacity> <TouchableOpacity style={styles.buttonContainer}> <Text style={styles.buttonText}>Create Account</Text> </TouchableOpacity> </KeyboardAvoidingView> ); } } const styles = StyleSheet.create({ container: { padding: 20 // creates a gap from the bottom }, userInput: { marginBottom: 20, backgroundColor: '#9b42f4', height: 40 }, buttonContainer: { backgroundColor: '#41bbf4', paddingVertical: 10, marginBottom: 20 }, buttonText: { textAlign: 'center', color: '#FFFFFF' } }); const mapStateToProps = state => { return { email: state.auth.email }; }; export default connect(mapStateToProps, (dispatch) => ({emailChanged: (text) => dispatch(emailChanged(text))}))(LoginForm);
Here's
index.js
:import {EMAIL_CHANGED} from './types'; export const emailChanged = (text) => { return { type: 'EMAIL_CHANGED', payload: text }; }; onEmailChange = (text) => { this.props.emailChanged(text); }; export default emailChanged;