Stuck with this simple project, NEED HELP!

Hi there,

I am working on this multistep-form,

I have placed everything as it should be but I keep getting this annoying message that the module can’t be found when the actual module IS THERE, it’s imported correctly and VS doesn’t signal any apparent error.

It’s been 2 days I am trying to sort this out but without luck.

Can you guys help?
Capture1|690x387

And this is the Confirmation.jsx file which allegedly can’t be resolved!

import React,{ Component } from 'react';
import { Button, List } from 'semantic-ui-react';

class Confirmation extends Component{
    saveAndContinue = (e) => {
        e.preventDefault();
        this.props.nextStep();
    }

    back  = (e) => {
        e.preventDefault();
        this.props.prevStep();
    }

    render(){
        
        const {values: { firstName, lastName, email, mobile, coverLetter }} = this.props;

        return(
            <div>
                <h1 className="ui centered">Confirm your Details</h1>
                <p>Click Confirm if the following details have been correctly entered</p>
                <List>
                    <List.Item>
                        <List.Icon name='users' />
                        <List.Content>First Name: {firstName}</List.Content>
                    </List.Item>
                    <List.Item>
                        <List.Icon name='users' />
                        <List.Content>Last Name: {lastName}</List.Content>
                    </List.Item>
                    <List.Item>
                        <List.Icon name='mail' />
                        <List.Content>
                            <a href='mailto:jack@semantic-ui.com'>{email}</a>
                        </List.Content>
                    </List.Item>
                    <List.Item>
                        <List.Icon name='mobile' />
                        <List.Content>{mobile}</List.Content>
                    </List.Item>
                    <List.Item>
                        <List.Icon name='coverLetter' />
                        <List.Content>{coverLetter}</List.Content>
                    </List.Item>
                </List>

                <Button onClick={this.back}>Back</Button>
                <Button onClick={this.saveAndContinue}>Confirm</Button>
            </div>
        )
    }
}

export default Confirmation; 

There’s a typo in a filename.

Would you please be so kind to point that out for me?
I have been checking but I can’t seem to find it!

Thanks in advance

Your file is named Confimation.jsx instead of Confirmation.jsx … there is the typo. The ‘r’ is missing.

Don’t forget that the part after ‘from’ in an import is the file location and must be correctly typed.

Screenshot at Jan 16 20-39-04

Eagle eye!!

I can’t believe it was the missing “r” in the filename.

It is now working.

Thank you so much!