React noob having issues exporting component to another component

Question

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

In your case: export default class AnswerBox extends React.Component and get rid of module.exports — Evaldas Buinauskas
– Evaldas Buinauskas, Commented Apr 5, 2018 at 13:22
When I change it to that I get this error instead Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object — Barry Watts
– Barry Watts, Commented Apr 5, 2018 at 13:26
Kenneth did a better job, his answer is more detailed than mine. — Evaldas Buinauskas
– Evaldas Buinauskas, Commented Apr 5, 2018 at 13:33

Kenneth Truong · Accepted Answer · 2018-04-05 13:29:07Z

2

You can't mix import and module.exports

You should use export default instead of module.exports

Update

module.exports = GetAnswerButton;

to

export default GetAnswerButton;

The way that you're importing is also incorrect. After you update to use export default update these import from

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

to

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

edited Apr 5, 2018 at 13:29

answered Apr 5, 2018 at 13:21

Kenneth Truong

4,1763 gold badges32 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Barry Watts Over a year ago

When I change it to that I get this error instead Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Kenneth Truong Over a year ago

Make sure your import statement is is updated to. Where it should be import GetAnswerButton from './subcomponents/GetAnswerButton.js';

Barry Watts Over a year ago

Brilliant thanks, that was a overspill from another error previous to this.

splitiii · Accepted Answer · 2018-04-05 13:24:16Z

Box

React from 'react';

import GetAnswerButton from './subcomponents/GetAnswerButton';

export default class AnswerBox extends React.Component{

    render(){
       return(
            <div>
                <div className="answerBox"></div>
                <GetAnswerButton />
            </div>
        )
    }
}

Button

import React from 'react';

export default class GetAnswerButton extends React.Component {

    constructor() {
        super()
    }

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

this should work.

if you dont want to export the class in declaration

try to export with

export default AnswerBox;

Collectives™ on Stack Overflow

React noob having issues exporting component to another component

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related