[React] Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. 오류 해결방법

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

해당 오류 코드는 대략적으로 다음과 같다.

// client.jsxconst React = require('react');
const ReactDOM = require('react-dom');
const NumberBaseball = require('./NumberBaseball');
 
const root = document.querySelector('#root');
const rootContainer = ReactDOM.createRoot(root);
 
rootContainer.render(<NumberBaseball />)

 

// NumberBaseball.jsximport React, {Component} from 'react';
 
function getNumbers(){ // 숫자 네 개를 겹치지 않고 랜덤하게 뽑는 함수
 
}
class NumberBaseball extends Component{ 
    state ={
        result: '',
        value: '',
        answer: getNumbers(),
        tries: [],
    };
 
    onSubmitForm = () => { // 내가 만드는 함수는 화살표 함수로
        
    };
 
    onChangeInput = () => {
 
    };
 
    render(){
        return (
            <>
                <h1>{this.state.result}</h1>
                <form onSubmit={this.onSubmitForm}>
                    <input maxLength={4} value={this.state.value} onChange={this.onChangeInput}/>
                    
                </form>
                <div>시도: {this.state.tries.length}</div>
                <ul>
                    {['like','like','like','like'].map(()=>{
                        return (
                            <li>like</li>
                        )
                    })}
                </ul>
            </>
            // value와 onChange는 세트, defaultValue={this.state.value}로 대체 가능 
        )
    }
}
 
 
export default NumberBaseball; // import NumberBaseball
 
 

해당 오류는 NumberBaseball.jsx에서는 ES6 모듈 문법을 이용해서 export default NumberBaseball; 로 내보내고 있지만,
 client.jsx에서는 CommonJS 문법을 사용하여 require('./NumberBaseball); 로 가져오고 있다. 
이러한 혼용이 문제가 생겼다.

해결 방법은 다음과 같다.

// NumberBaseball.jsx
 
===================(변경전)====================
 
import React, {Component} from 'react';
 
===================(변경후)====================
 
const React = require('react')
const {Component} = require('react')
 
 
===================(변경전)====================
 
export default NumberBaseball;
 
===================(변경후)====================
 
module.exports = NumberBaseball;

 

+ Chat GPT에 나온 해설들