Why am I getting "unused default export" error?

Question

I don't get how I'm getting unused default export error whenever I hover over export default emailChanged; in my index.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;

score 4 · Answer 1 · answered Jun 27 '17 at 15:50

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.

Did you get a chance to check this – Shubham Khatri Jun 27 '17 at 16:07 — Shubham Khatri, Jun 27 '17 at 16:07

score 0 · Answer 2 · answered Jun 27 '17 at 15:52

0

Because you used export default emailChanged, you can't get the value of emailChanged by destructing. Remove the export default emailChanged line in your index.js and you should be good.

answered Jun 27 '17 at 15:52

Chiamaka Nwolisa

951
8
15

It doesn't work. If I do that and then hover over `export const emailChanged`, it gives me a `unused constant emailChanged` error. – van jok Jun 27 '17 at 16:00
I think you can just pass the action to the connect function. so you can try this`export default connect(mapStateToProps, emailChanged)(LoginForm)`. I'm not too sure about this tho. – Chiamaka Nwolisa Jun 27 '17 at 16:13

onionring · Answer 3 · 2022-06-04T15:02:49.193

0

Because you have the wrong import.

replace:

import {emailChanged} from 'TorusTeensApp/src/actions';

with:

import emailChanged from 'TorusTeensApp/src/actions';

Here's a better explanation: Difference between "import {Something} from somelib" and "import Something from somelib" React.js

edited Jun 04 '22 at 15:02

answered Jun 04 '22 at 14:55

onionring

421
5
7

Why am I getting "unused default export" error?

3 Answers3