Error: Nothing was returned from render.

Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

원인

보통 다음과 같이 React component function에서 undefined를 반환하여 rendering 하는 상황에서 발생한다.

import React from 'react';
import './App.css';

function App() {
  const name = undefined;
  return name;
}

export default App;

해결

undefined 만 return 되는 상황을 방지하면 된다.

// || OR 연산자 이용
import React from 'react';
import './App.css';

function App() {
  const name = undefined;
  return name || '값이 undefined입니다.';
}

export default App;

JSX 문법 안에서 undefined를 rendering 하는 것 또한 오류를 일으키지 않는다.

import React from 'react';
import './App.css';

function App() {
  const name = undefined;
  return <div>{name}</div>;
}

export default App; 

My Case

return 뒤에 ()가 없이 바로 줄 바꿈을 하는 바람에 return 값이 없는 것 처럼 되어 오류가 발생했다.

import React from "react";

const WorkList = (props) => {
    return
    <React.Fragment>
        WorkList
    </React.Fragment>;
};

export default WorkList;

해결

import React from "react";

const WorkList = (props) => {
    return <React.Fragment>
        WorkList
    </React.Fragment>;
};

export default WorkList;

참고 velog