Material-ui-pickers: Stack trace on startup with TypeScript

[mfsjr]

Environment

| Tech | Version |
|---------------------|---------|
| material-ui-pickers | 2.0.1 |
| material-ui | 3.5.1 |
| React | 16.6.0 |
| Browser | Chrome 69.0.3497.100 (Official Build) (64-bit) |
| Peer library | "@date-io/date-fns": "0.0.2", "moment": "^2.22.2", |

Also,
"react-dom": "^16.6.0",
"react-scripts": "2.1.1",
"typescript": "3.1.5"

Steps to reproduce

1. create-react-app crats2 --typescript
2. Modify default App.tsx and mimic demo code in App.tsx:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { InlineDatePicker } from 'material-ui-pickers';

interface ReactState {
  selectedDate: string;
}

class App extends Component<any, ReactState> {

  state: ReactState = { selectedDate: '2018-01-01T00:00:00.000Z' };

  public handleDateChange(value: string): void {
    this.setState({selectedDate: value});
  }

  render() {
    const { selectedDate } = this.state;
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.tsx</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
          <InlineDatePicker
            label="Basic example"
            value={selectedDate}
            onChange={this.handleDateChange}
          />
        </header>
      </div>
    );
  }
}

export default App;

1. npm start

Expected behavior

App starts

Actual behavior

App crashes with stack:
Failed to compile

/Users/mfsjr/WebstormProjects/node/crats2/node_modules/material-ui-pickers/DatePicker/DatePickerInline.d.ts
Type error: Namespace 'React' has no exported member 'ForwardRefExoticComponent'.  TS2694

     8 | }
     9 | export declare const DatePickerInline: React.SFC<DatePickerInlineProps>;
  > 10 | declare const _default: React.ForwardRefExoticComponent<DatePickerInlineProps & React.ClassAttributes<{}>>;
       |                               ^
    11 | export default _default;
    12 | 

Live example

[TrySound]

@mfsjr Which version of @types/react do you have?

[mfsjr]

Hi,
This is what I've got..
"_from": "@types/react",
"_id": "@types/[email protected]",
Thanks!

[mfsjr]

Doesn't work with 16.7.6 either. What is it supposed to work with?

[WandersonAlves]

I got this error trying to use this component:

/home/wanderson/Desktop/dev/e3/e3-dashboard-web/node_modules/@date-io/date-fns/build/date-fns-utils.d.ts
ERROR in /home/wanderson/Desktop/dev/e3/e3-dashboard-web/node_modules/@date-io/date-fns/build/date-fns-utils.d.ts(1,8):
TS1192: Module ''date-fns/locale/en-US'' has no default export.

My initial render is this:

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { MuiPickersUtilsProvider } from 'material-ui-pickers';
import { SnackbarProvider } from 'notistack';

import DateFnsUtils from '@date-io/date-fns';

import store from './common/store/';
import App from './modules/App';
import registerServiceWorker from './registerServiceWorker';

import './index.scss';

ReactDOM.render(
  <Provider store={store}>
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
      <SnackbarProvider maxSnack={5}>
        <App />
      </SnackbarProvider>
    </MuiPickersUtilsProvider>
  </Provider>,
  document.getElementById('root') as HTMLElement
);
registerServiceWorker();

My React version is: 16.6.1

...and another list of errors:

[nick-gaudreau]

Similar problem here. In the type definition files. Create React App V2 using typescript:

../node_modules/material-ui-pickers/_shared/BasePicker.d.ts
Type error: Namespace 'React' has no exported member 'FunctionComponent'. TS2694

Then if clear this error in type definition I get:

node_modules/material-ui-pickers/_shared/WithUtils.d.ts
Type error: Namespace 'React' has no exported member 'FunctionComponent'. TS2694

Then if I clear this error, I get:

node_modules/material-ui-pickers/DatePicker/DatePicker.d.ts
Type error: Namespace 'React' has no exported member 'FunctionComponent'. TS2694

Then there's more and more.... I'll try to manually fix them all. But would be nice if it just work for typescript or simply say that material-ui-pickers doesn't support typescript - this issue mentions that it does...#78

[nick-gaudreau]

I got the same error from the initial post on this issue as well:

../node_modules/material-ui-pickers/DatePicker/DatePickerInline.d.ts
Type error: Namespace 'React' has no exported member 'ForwardRefExoticComponent'. TS2694

Using React 16.6.0

Your latest version is broken for Typescript...

I installed [email protected] and it worked.
[email protected] also works.

@2.0.1 crash. So something is likely to be wrong in one or many commit that got into version 2.0.1

[dmtrKovalenko]

Update @types/react

[luky1984]

2.0.0 isn't working too it says

/node_modules/material-ui-pickers/_shared/DateTextField.d.ts
(83,9): Unused label.

"typescript": "2.8.3"
"react": "^16.4.0",
"@types/react": "16.4.14",

edit: so bug above is gone with

"typescript": "2.9.2"

but still there is another problem now

/@date-io/date-fns/build/index.esm.js
Module not found: Can't resolve 'date-fns/addDays

 "@date-io/date-fns": "^1.3.5",
   "date-fns": "^1.29.0",

edit: i followed the advice here https://github.com/dmtrKovalenko/date-io/issues/33#issuecomment-476093943

and now i have:

    "@date-io/date-fns": "1.3.5",
    "date-fns": "2.0.0-alpha.27",

there is no compilation error but some runtime error when i click the datetime field

"TypeError: _this.props.utils.getStartOfMonth is not a function"
Calendar: material-ui-pickers.esm.js:1360

edit: Uh.. so i tried 100 zillions of combinations of version and i ended with this:

• scratch @date-io/date-fns from package.json and

  "date-fns": "2.0.0-alpha.16",
  "material-ui-pickers": "1.0.0",
  "typescript": "2.9.2"

when providiong fns utils to provider use:

import DateFnsUtils from 'material-ui-pickers/utils/date-fns-utils';

I spent on it about 6 hours of crazy installations back and forth.