We Keep Coding

React big calendar has no default export

I wanted to use react-big-calendar, I installed the package with npm (version 0.28.0), but I was able to use the component because there is apparently no default export. The exact error is
Attempted import error: 'react-big-calendar' does not contain a
default export (imported as 'BigCalendar').
If I should not use default export, I did not find anywhere what I should import instead.
I used this tutorial in order to make it work. I searched on the internet for similar issue, but I did not find anything that provide a solution.
My code so far is very minimalist, since I was not able to start anything
import BigCalendar from 'react-big-calendar'
import moment from 'moment'
const MyComponent = props => {
const localizer = BigCalendar.momentLocalizer(moment)
return(
<div>
<BigCalendar localizer={localizer}/>
<div>
)
}
Thank you in advance for any response.

I will suggest you to try this out.
// the imports
import { Calendar, momentLocalizer } from 'react-big-calendar'
import 'react-big-calendar/lib/css/react-big-calendar.css';
import moment from 'moment'
const localizer = momentLocalizer(moment)
// The component you should use instead the one you mentioned.
<Calendar localizer={localizer} />
let me know if that works for you, I remember having the same issue and I solved by doing this.
Best regards, I hope it helps!

You should use named exports provided by the library. Additionally library exports Calendar component which should replace your BigCalendar default import.
import { Calendar, momentLocalizer } from 'react-big-calendar'
import moment from 'moment'
const MyComponent = props => {
const localizer = momentLocalizer(moment)
return(
<div>
<Calendar localizer={localizer}/>
<div>
)
}

npm install --save #types/react-big-calendar

How to make react-datepicker display properly?

I cannot make the component react-datepicker display properly.
it actually displays like this.
I wish it could display at least like the documentation for the component does.
I first thought it was a dependency problem, and added all the dependencies the doc says are needed. The result is still the same.
Some stackoverflow questions talked about this and referred to a missing stylesheet. However I imported everything with npm, so that shouldn't be the problem.
My class component looks like this :
import React from "react";
import "./style.css";
import DatePicker from "react-datepicker";
class Filters extends React.Component {
constructor(props) {
super(props);
this.state = {
startDate : new Date()
};
this.handleStartChange = this.handleStartChange.bind(this);
}
handleStartChange = (date) => {
this.setState({
startDate : date
})
}
render() {
return (
<div className="filters">
<div id="filterbox">
<p id="titre">Filtres</p>
<DatePicker
selected={this.state.startDate}
onChange={this.handleStartChange} />
</div>
</div>
)
}
}
export default Filters;
I apologize in advance if the problem is very obvious, I'm quite new to reactjs.

You forgot to import the package css.
From the documentation:
import "react-datepicker/dist/react-datepicker.css";

I think you have to import the react-datepicker.css too, not only the package itself.
import "react-datepicker/dist/react-datepicker.css";
Below is a simple example of how to use the Datepicker in a React
view. You will also need to require the CSS file from this package (or
provide your own). The example below shows how to include the CSS from
this package if your build system supports requiring CSS files
(Webpack is one that does).

you haven't imported their css file.
import "react-datepicker/dist/react-datepicker.css";

TypeError: Object(...) is not a function with React Table and moment.js

I am using React Table module, and I'm trying to make use of moment to display a better date format from the created_at field of the data passed to ReactTable component.
let columns = [{
id: "createdAt",
Header: "Created",
accessor: a => <Fragment>{moment(a.created_at).format("MM DD YYYY")}</Fragment>
}];
But for some reason, it's whining with the error
TypeError: Object(...) is not a function
pointing to this line.
If I simply do a.created_at it will display it normally. The module is imported for sure.

I had this error when I am importing moment the wrong way
import {moment} from "moment"; // with errors 'Object(...) is not a function'
import moment from "moment"; //no more errors

It's may due to wrong import statement
import moment from 'moment';
don't write
import * as moment from 'moment';
or
import {moment} from 'moment';

Why doesn't this component show at all? React DatePicker

Here is the component:
import React, { Component } from 'react';
import DatePicker from 'react-datepicker';
class DatePickerCreater extends Component {
constructor(props){
super(props);
}
render() {
return (
<DatePicker
disabled={this.props.answer.isDisabled}
dateFormat="YYYY/MM/DD"
selected={Date(this.props.answer.value)}
onChange={(e) => this.props.blurHandler(e.target.value,this.props.answer)}
/>
);
}
}
export default DatePickerCreater
when i try to render it, it shows nothing...
Very grateful for every answer!

The selected property takes a moment.js date, not a plain javascript date. You should get an error that says "date.clone is not a function
". You can fix that by using a moment date:
import moment from 'moment';
class DatePickerCreater extends Component {
render() {
return (
<DatePicker
disabled={this.props.answer.isDisabled}
dateFormat="YYYY/MM/DD"
selected={moment(this.props.answer.value)}
onChange={(e) => this.props.blurHandler(e.target.value, this.props.answer)}
/>
)
}
}
Also you may have forgotten to import the react-datepicker css file. Without that the popup will not show correctly:
import 'react-datepicker/dist/react-datepicker.css';
EDIT
Since they switched to using date-fns this answer is outdated. If you are using react-date-picker with a version >=2.0 you can no longer pass a moment.js instance. Instead use native Date objects and manipulate them using date-fns.
For Reference:
Up until version 1.8.0, this package was using Moment.js. Starting
v2.0.0, we switched to using date-fns, which uses native Date objects,
to reduce the size of the package. If you're switching from 1.8.0 to
2.0.0 or higher, please see the updated example above of check out the examples site for up to date examples.

The code is not enough, what can I tell super() need to be called with props:
constructor(props){
super(props);
// ... code
}

React-day picker with redux form

i need to make react-day picker component compatible with redux form. I know this is not absolutey right but redux form is manadatory for my current project. But i struggle to make it. I used react date picker which i made it compatible with this way:
import React from 'react';
import { PropTypes } from 'prop-types';
import DatePicker from 'react-datepicker';
import moment from 'moment';
import { injectIntl, intlShape } from 'react-intl';
import 'react-datepicker/dist/react-datepicker.css';
const MyDatePicker = props => (
<div>
<DatePicker
{...props.input}
dateFormat="DD-MM-YYYY"
selected={props.input.value
? moment(props.input.value, 'DD-MM-YYYY')
: null}
placeholderText={props.placeholder}
disabled={props.disabled}
/>
{
props.meta.touched && props.meta.error &&
<span className="error">
{ props.intl.formatMessage({ id: props.meta.error }) }
</span>
}
</div>
);
MyDatePicker.propTypes = {
input: PropTypes.shape().isRequired,
placeholder: PropTypes.string,
disabled: PropTypes.bool,
meta: PropTypes.shape().isRequired,
intl: intlShape.isRequired
};
export default injectIntl(MyDatePicker);
but i struggle to make it with react day picker. Can anyone help me for achieving this?

I had a similar issue months back where the project called for redux forms and a date picker. The solution I came to was to wrap the date picker into it's own component and then wrap that component in another component, which then got used as a custom input component in redux forms.
I imagine you won't have to wrap as many times as I did but the concept should still be similar. Take a look at the code in this question as it shows an example of how to incorporate a date picker with redux-forms:
How to onFocus and onBlur a React/Redux form field that's connected to React Date Picker?