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 trialDaniel Cranney
11,609 PointsFailed 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
Treehouse TeacherHi 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
The very bottom should look like:
);
export default SearchForm;
Hope this helps!
Daniel Cranney
11,609 PointsDaniel Cranney
11,609 PointsThanks 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!