new to React and trying to pass a component from one js file to another but keep getting this error

TypeError: Cannot assign to read only property 'exports' of object '#'

I have index.js 

```
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import * as AnswerBox from './components/AnswerBox.js';

ReactDOM.render(
    <AnswerBox />,
    document.getElementById('root')
);

```

then I have AnswerBox.js in the components folder

```
import React from 'react';
import ReactDOM from 'react-dom';

import * as GetAnswerButton from './subcomponents/GetAnswerButton.js';

class AnswerBox extends React.Component{

    render(){
       return(
            <div>
                <div className="answerBox"></div>
                <GetAnswerButton />
            </div>
        )
    }
}
module.exports = AnswerBox;

```

then in a sub folder of components called subcomponents I have another files called GetAnswerButton.js

```
import React from 'react';
import ReactDOM from 'react-dom';

class GetAnswerButton extends React.Component {

    constructor() {
        super()
    }
    render() {
        return (
            <div>
                <button>Click Me</button>
            </div>
        )
    }
}

module.exports = GetAnswerButton;

```

I have index.html at the same level as index.js

```
<!DOCTYPE html>
<html>
 <head>
    <meta charset="utf-8">
    <title>React Landing Page</title>
 </head>
<body>
  <div id="root"></div>

</body>

```

and index.css also at the same folder level as index.js

```
.answerBox {
    border: 1px solid red;
    height:30px;
    width:75px;
}

```

It all works if I have all the js code in index.js but as soon as I split it into component js files I get this error.

TypeError: Cannot assign to read only property 'exports' of object '#'

I know its probably something obvious.
cheers