React.js with browserify imports not working

Question

I am learning React.js and can not make my firt component to render. My project looks like this:

javascript
  |
  --components
  |   |
  |   ---- searchbar.jsx
  |
  |    
  --app.jsx

searchbar.jsx:

export default class SearchBar extends React.Component {
    //some code

    render(){
       //some code
     }
}

app.jsx looks like this.

import React from 'react';
import ReactDOM from 'react-dom';
import { SearchBar } from './components/searchbar.jsx';

ReactDOM.render(

        <App />
       ,
    document.getElementById('content')
);

class App extends React.Component {



    render() {
        <div>
            <SearchBar  placeHolder='search bar text'/>
        </div>
    }
}

When compiled and packed there is no error. However when I run it, I am getting following error:

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.
  printWarning  
  warning   
  createElement 
  1../components/searchbar.jsx  

When I put all code in app.jsx and use no import then everything is working as should and search bar is showing.. but I want to put components in different files. How do I do that then?

Answer 1

SearchBar module exports a default value, not a named export (by enclosing with curly braces braces you require a named export )

You should change import { SearchBar } to import SearchBar

Additionally, you should move the declaration of App towards the beginning of the file, it should be declared before it is used