Import ReactJS Component in browser as a Script

Question

I wrote a component in reactJS that renders a tree

I am unable to import it directly to browser and keep getting this error:

Uncaught Error: Module name "TreeComponent" has not been loaded yet for context: _. Use require([])
http://requirejs.org/docs/errors.html#notloaded
    at makeError (require.js:5)
    at Object.o [as require] (require.js:5)
    at requirejs (require.js:5)
    at reactJS_returnReactJs.action:2192

babel preset is react-app:

  "babel": {
    "presets": [
      "react-app"
    ]
  },

entry point for build is index.js:

export {default} from './components/TreeComponent';

Can you help me to find out what is wrong in my build steps?

Answer 1

If you export react component in your TreeComponent.js this way

export default TreeComponent({

});

Or something like this

exports.default = TreeComponent;

You need to import it this way

import { TreeComponent } from './components/TreeComponent';

Or you can do this way too

import TreeComponent from './components/TreeComponent/TreeComponent';