Importing React component in Play framework

Question

I am trying to use React to render the UI in Play framework. I have my react Components in multiple files and am trying to import the Components from one file to another but I always get the following error on compilation " Illegal Import Declaration" and Illegal export Declaration

Component1.jsx

 import {Component2} from './Component2'
 class Component1 extends React.Component{
    render(){
       <div><h1>Hello</h1>
         <Component2 />
         </div>
    }
 }

ReactDOM.render(<Component1 />, document.getElementById('headerLine'))

Component2.jsx

export class Component2 extends React.Component{
   render(){
   <div><h1>World</h1></div>
   }
}

The play framework version being used is 2.4.2 .
React version 0.14.3. What can be the possible issue here? Do I need to use bundlers like webpack or browserify? If Yes how do I do it with play framework?

Answer 1

Yes, you will need to bundle your javascript while browsers don't add support for ES6 modules

To do that in the play framework you have two options, one is using sbt-web which is the standard way to deal with assets in play framework (which I quite don't like) or you can simple use webpack as you would normally do and add a hook in your build to bundle your app. Here is the documentation on how to call another process before starting the server.