namespace-ee / react-calendar-timeline

A modern and responsive react timeline component.
MIT License
1.94k stars 637 forks source link

A valid React element (or null) must be returned. #409

Closed PirateNick closed 6 years ago

PirateNick commented 6 years ago

When adding the timeline to my ASP .net core 2 project, I get the following error:

Consumer.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

image

I'm using typescript, and these versions:

"react-calendar-timeline": "^0.19.0",
"interactjs": "^1.3.4",
"react": "^16.4.2",
"react-dom": "^16.4.2",
"moment": "^2.22.2"

I copy pasted the exampel code from the docs:

import * as moment from 'moment';
import TimelineCalendar from 'react-calendar-timeline';
import 'react-calendar-timeline/lib/Timeline.css';

const groups = [{ id: 1, title: 'group 1' }, { id: 2, title: 'group 2' }]

const items = [
    {
        id: 1,
        group: 1,
        title: 'item 1',
        start_time: moment(),
        end_time: moment().add(1, 'hour')
    },
    {
        id: 2,
        group: 2,
        title: 'item 2',
        start_time: moment().add(-0.5, 'hour'),
        end_time: moment().add(0.5, 'hour')
    },
    {
        id: 3,
        group: 1,
        title: 'item 3',
        start_time: moment().add(2, 'hour'),
        end_time: moment().add(3, 'hour')
    }
]

with in the render function:

<TimelineCalendar
        items={items}
        groups={groups}
        defaultTimeStart={moment().add(-12, 'hour')}
        defaultTimeEnd={moment().add(12, 'hour')}
 />

Any idea?

mcMickJuice commented 6 years ago

Please verify that you indeed have React 16+ installed. That error above is related to returning an array and pertains to React 15 <

PirateNick commented 6 years ago

I read that too somewhere, so I upgraded my react version in the package.json file. I also deleted the dist folder and rebuild the project.

Unfortunately, this was not enough. I just quickly deleted the node modules folder and manually installed all the packages through cmd (npm install). Now I get a bunch of type (typescript) errors, but I think my react was indeed not fully upgraded, and now it is.

I don't have time to look into this further right now, but I'm 90% sure this will fix it. So if anyone else is still having this problem, delete node modules folder and reinstall, because apparently, Visual Studio doesn't do a great job in automatically upgrading react when the package.json file is changed.

Thanks for the help!