Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Customizing Your Project

Posted by Daniel Cranney
Daniel Cranney
11,609 Points

Failed to compile: Attempted import error: './components/SearchForm' does not contain a default export (imported as 'Sea

This course is quite difficult, and feels like it could do with an update to make the process a little more straight-forward.

I'm receiving a failed to compile error... Failed to compile ./src/App.js Attempted import error: './components/SearchForm' does not contain a default export (imported as 'SearchForm')..

My code is... App.js

import { Container, Jumbotron } from 'react-bootstrap';
import SearchForm from './components/SearchForm';

function App() {
  return (
    <div>
      <Jumbotron>
        <Container>
          <h1>Search App</h1>
          <p>This is a simple search app</p>
          <SearchForm />

        </Container>
      </Jumbotron>
    </div>
  );
}

export default App;

Components/SearchForm.js

import React from 'react';
import {
    Form,
    FormGroup,
    FormControl,
    Button
} from 'react-bootstrap';

const SearchForm = () => (

    <Form inline>
  <FormGroup controlId="formInlineEmail">
    <FormControl type="search" placeholder="enter something..." />
  </FormGroup>
  {' '}
  <Button type="submit">
    search
  </Button>
</Form>

);

<Form inline>
  <FormGroup controlId="formInlineEmail">
    <FormControl type="search" placeholder="enter something..." />
  </FormGroup>
  {' '}
  <Button type="submit">
    search
  </Button>
</Form>

1 Answer

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi there, Daniel Cranney! In your SearchForm.js I'm not seeing the very final line:

export default SearchForm;

This was shown around the 5:22 mark of the video link here but seems to be missing from the code you posted. I believe that's what is causing the error you're seeing. I'm also wondering if maybe the bottom of that file got erased somehow because it also seems to be missing a closing parenthesis and semicolon );. I feel like maybe you accidentally deleted the bottom of that file somehow :smiley:

The very bottom should look like:

    );
export default SearchForm;

Hope this helps! :sparkles:

Daniel Cranney
Daniel Cranney
11,609 Points

Thanks so much, I went away and watched Guil Hernandez 's 'Create React App' workshop and it helped me to realise this was needed at the bottom of the file. React can be a little bit of a frustrating learning curve, but i know it's all worth it! Thanks for the response, I've learned a lot!