material-ui-pickers: TS2307 Cannot find module '@date-io/type'

cry

Environment

Tech Version
@material-ui/pickers 3.0.0
material-ui 4.0.1
React 16.8.5
Browser irrelevant
Peer library date-fns@next

Steps to reproduce

  1. create a project with ts and react

  2. install @material-ui/picker

  3. use the DatePicker with the provider and try to build it

  4. should fail

Expected behavior

My app should build 💃

Actual behavior

../../node_modules/@material-ui/pickers/DatePicker/components/YearSelection.d.ts:2:26 - error TS2307: Cannot find module '@date-io/type'.

2 import { DateType } from '@date-io/type';
                           ~~~~~~~~~~~~~~~

../../node_modules/@material-ui/pickers/typings/date.d.ts:1:26 - error TS2307: Cannot find module '@date-io/type'.

1 import { DateType } from '@date-io/type';
                           ~~~~~~~~~~~~~~~

How to fix it

From what i saw the type DateType does not exist on @date-io/type (because @date-io/type does not exist) We should create this type manually instead of trying to import it from a place that doesnt exist.


Or maybe i just missed some steps or i forgot something but i hope not, it would be embarrassing 🤣!

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Reactions: 7
  • Comments: 30 (21 by maintainers)

Most upvoted comments

im getting this too with @date-io/luxon

node_modules/@material-ui/pickers/typings/date.d.ts:1:26 - error TS2307: Cannot find module '@date-io/type'.

1 import { DateType } from '@date-io/type';
                           ~~~~~~~~~~~~~~~

node_modules/@material-ui/pickers/views/Year/YearView.d.ts:2:26 - error TS2307: Cannot find module '@date-io/type'.

2 import { DateType } from '@date-io/type';
                           ~~~~~~~~~~~~~~~

please resolve

Closing that. Here is a repo where auto-linked @date-io/type module works like a charm

yarn tsc succed

For me the missing type was added after configuring the locale

import { MuiPickersUtilsProvider } from '@material-ui/pickers';
import MomentUtils from '@date-io/moment';
import moment from 'moment';
import 'moment/locale/pl';

moment.locale('pl');
...
      <MuiPickersUtilsProvider utils={MomentUtils} locale="pl">
...

The missing type comes with @date-io/moment

@rosskevin here is my package.json

{
    "name": "components-base",
    "version": "1.0.0",
    "description": "Common components",
    "scripts": {
        "build": "npm-run-all tsc:build package",
        "tsc:build": "tsc -p .",
        "lint": "tslint -p tsconfig.json",
        "package": "npm pack",
        "start": "webpack-dev-server --open"
    },
    "files": [
        "build"
    ],
    "husky": {
        "hooks": {
            "pre-commit": "lint-staged"
        }
    },
    "lint-staged": {
        "*.{ts,tsx}": [
            "npm run lint",
            "git add"
        ]
    },
    "peerDependencies": {
        "@date-io/luxon": ">=1.3.11",
        "@material-ui/core": ">=4.5.0",
        "@material-ui/icons": ">=4.4.3",
        "@material-ui/pickers": ">=3.2.6",
        "luxon": ">=1.19.3",
        "react": ">=16.10.1",
        "react-dom": ">=16.10.1",
        "react-redux": ">=7.1.1",
        "react-select": ">=3.0.8",
        "redux": ">=4.0.4",
        "typesafe-actions": ">=4.4.2"
    },
    "devDependencies": {
        "@types/luxon": "^1.15.2",
        "@types/react": "^16.9.6",
        "@types/react-dom": "^16.9.2",
        "@types/react-redux": "^7.1.4",
        "@types/react-select": "^3.0.5",
        "clean-webpack-plugin": "^3.0.0",
        "html-webpack-plugin": "^3.2.0",
        "husky": "^3.0.9",
        "lint-staged": "^9.4.2",
        "npm-run-all": "^4.1.5",
        "ts-loader": "^6.2.0",
        "tslint": "^5.20.0",
        "tslint-config-prettier": "^1.18.0",
        "tslint-react": "^4.1.0",
        "typescript": "^3.6.4",
        "webpack": "^4.41.2",
        "webpack-cli": "^3.3.9",
        "webpack-dev-server": "^3.8.2",
        "@date-io/luxon": "^1.3.11",
        "@material-ui/core": "^4.5.1",
        "@material-ui/icons": "^4.5.1",
        "@material-ui/pickers": "^3.2.7",
        "luxon": "^1.19.3",
        "react": "^16.10.2",
        "react-dom": "^16.10.2",
        "react-redux": "^7.1.1",
        "react-select": "^3.0.8",
        "redux": "^4.0.4",
        "typesafe-actions": "^4.4.2"
    }
}

For Clarity: The package is the only thing in the repo. No Im not using yarn

Closing due to silency

thats one of the first things i tried actually… ! Right now as a temporarily “fix” i added "skipLibCheck": true, to my tsconfig file because we are using it in a project that we use at my company and we need build to pass 😄 But i’m going to look into it today or tomorrow for an alternative) because i do not want to have this options set !

Here is https://github.com/dmtrKovalenko/date-io/tree/master/packages/date-fns/type

Actually one thing you need is to make

declare module "@date-io/type" {
  export type DateType = Date;
}

Further details are here: https://github.com/dmtrKovalenko/date-io/issues/52

Though I’ve still not been able to solve it. Ideas are welcome.

@dmtrKovalenko I am seeing the same thing with @date-io/date-fns@1.3.7 and there is no @date-io/lib installed locally (mentioned in https://github.com/mui-org/material-ui-pickers/issues/1074#issuecomment-497763923)

As far as I can tell, the only occurrence I have of this is in node_modules/@date-io/date-fns/type as a manual type declaration or augmentation.

I’m now confused. Where is the source of @date-io/type and why is it referred to as a package when it is neither published nor installed as such?