error loading with typescript 2.4

[timurridjanovic]

Bug report

• Package version(s): 1.20.0
• Browser and OS versions: Chrome Version 58.0.3029.110 and OS X El Capitan 10.11.6

With typescript 2.4 I get this error (The error was not present with typescript 2.3.3):

ERROR in [at-loader] ./node_modules/@blueprintjs/core/dist/components/collapse/collapse.d.ts:46:32
[0]     TS2559: Type '{ className: string; style: { height: string; overflowY: string; transition: string; }; }' has no properties in common with type 'DOMAttributes<Element>'.

my package.json dependencies:

  "dependencies": {
    "@blueprintjs/core": "^1.20.0",
    "@types/node": "^7.0.22",
    "@types/pure-render-decorator": "^0.2.27",
    "@types/react": "^15.0.28",
    "@types/react-addons-css-transition-group": "^15.0.2",
    "@types/react-dom": "^15.5.0",
    "@types/react-i18next": "^1.7.8",
    "@types/react-redux": "^4.4.40",
    "@types/react-router": "^3.0.0",
    "@types/react-router-redux": "^4.0.7",
    "@types/redux-persist": "^4.3.1",
    "@types/videojs": "^5.16.2",
    "airbrake-js": "^0.9.0",
    "app-module-path": "^2.2.0",
    "babel-polyfill": "^6.22.0",
    "camelcase": "^4.0.0",
    "concurrently": "^3.1.0",
    "d3": "^4.4.2",
    "denormalizr": "^0.5.2",
    "electron-log": "^2.2.4",
    "electron-updater": "^1.15.0",
    "express": "^4.15.2",
    "ffmpeg-static": "^2.0.0",
    "i18next": "^4.2.0",
    "i18next-browser-languagedetector": "^1.0.1",
    "json-loader": "^0.5.4",
    "lodash": "^4.17.4",
    "m3u8-reader": "^1.1.0",
    "mixpanel-browser": "^2.11.1",
    "mkdirp": "^0.5.1",
    "moment": "^2.17.1",
    "node-notifier": "^4.6.1",
    "normalizr": "^3.1.0",
    "pify": "^2.3.0",
    "prop-types": "^15.5.10",
    "pubnub": "^4.4.4",
    "pync": "^1.0.3",
    "react": "^15.4.1",
    "react-addons-css-transition-group": "^15.4.1",
    "react-breadcrumbs": "^1.5.2",
    "react-cropper": "^0.10.0",
    "react-dom": "^15.4.1",
    "react-i18next": "^2.0.0",
    "react-redux": "^5.0.1",
    "react-router": "^3.0.0",
    "react-router-redux": "^4.0.7",
    "react-select": "^1.0.0-rc.3",
    "redux": "^3.6.0",
    "redux-auth-wrapper": "^0.9.0",
    "redux-persist": "^4.0.1",
    "redux-saga": "^0.14.2",
    "request": "^2.79.0",
    "reselect": "^2.5.4",
    "rimraf": "^2.5.4",
    "socket.io-client": "^1.7.2",
    "uuid": "^3.0.1",
    "video.js": "^5.14.1",
    "videojs-contrib-hls": "^4.0.3",
    "webpack-material-design-icons": "^0.0.2"
  },
  "devDependencies": {
    "ava": "^0.17.0",
    "awesome-typescript-loader": "^3.1.3",
    "babel-core": "^6.21.0",
    "babel-loader": "^6.2.10",
    "babel-plugin-transform-async-to-generator": "^6.16.0",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.18.0",
    "babel-plugin-transform-object-rest-spread": "^6.20.2",
    "babel-preset-react": "^6.16.0",
    "babel-runtime": "^6.20.0",
    "cross-env": "^3.1.4",
    "css-loader": "^0.26.1",
    "electron": "^1.6.6",
    "electron-builder": "^17.3.1",
    "electron-devtools-installer": "^2.1.0",
    "enzyme": "^2.7.0",
    "file-loader": "^0.9.0",
    "jsdom": "^9.9.1",
    "json-loader": "^0.5.4",
    "jsx-loader": "^0.13.2",
    "mock-css-modules": "^1.0.0",
    "node-glob": "^1.2.0",
    "node-sass": "^4.3.0",
    "nyc": "^10.0.0",
    "proxyquire": "^1.7.10",
    "react-addons-test-utils": "^15.4.2",
    "react-hot-loader": "^1.3.1",
    "redux-devtools-extension": "^2.13.0",
    "sass-loader": "^4.1.1",
    "sinon": "^1.17.7",
    "source-map-loader": "^0.2.1",
    "spectron": "^3.4.1",
    "standard": "^8.6.0",
    "style-loader": "^0.13.1",
    "ts-node": "^3.0.4",
    "typescript": "^2.3.4",
    "webpack": "^2.2.1",
    "webpack-bundle-analyzer": "^2.2.1",
    "webpack-dev-middleware": "^1.9.0",
    "webpack-dev-server": "^1.16.2",
    "webpack-hot-middleware": "^2.16.1",
    "webpack-notifier": "^1.5.0"
  }

My tsconfig

{
  "compilerOptions": {
    "outDir": "./dist/",
    "sourceMap": true,
    "noImplicitAny": false,
    "module": "commonjs",
    "target": "es6",
    "jsx": "react",
    "strictNullChecks": true,
    "allowJs": true,
    "lib": ["dom", "es6", "dom.iterable", "scripthost", "es2017"],
    "moduleResolution": "node"
  },
  "include": [
    "./src/**/*"
  ]
}

[aleksey-shmatov]

This is caused by introduction of additional restrictions on "weak" types in TypeScript 2.4.

In TypeScript 2.4, we’re adding a similar check for what we call weak types. Any type that contains only optional properties is considered a weak type since it provides few restrictions on what can be assigned to it.

React.DomAttributes is a weak type.

[sandersn]

I have a PR out to change DOMAttributes to HTMLAttributes | SVGAttributes in React.DOMElement: DefinitelyTyped/DefinitelyTyped#17581. This reduces the fix in collapse.d.ts to fixing the type of overflowY: "initial" | "inherit" | "unset" | "auto" | "hidden" | "scroll" | "visible" | undefined;. Right now it's just string.

[jacekjagiello]

Hi, I've updated to 1.22.0, but the problem still appears. I'ts exactly the same as in bug description.

ERROR in /Users/jacek/react-typescript-starter/packages/ui/node_modules/@blueprintjs/core/dist/components/collapse/collapse.d.ts
(46,32): error TS2559: Type '{ className: string; style: { height: string; overflowY: "visible"; transition: string; }; }' has no properties in common with type 'DOMAttributes<Element>'.

I've check source code in node_modules to make sure I am using a version with this fix and it looks good:

src/components/collapse/collapse.tsx, line 127
overflowY: (isAutoHeight ? "visible" : undefined) as "visible" | undefined,

dist/components/collapse/collapse.d.ts, line 46-53

 render(): React.DOMElement<{
        className: string;
        style: {
            height: string;
            overflowY: "visible";
            transition: string;
        };
    }, Element>;

I'm not sure if collapse.d.ts is correct, but anyway problem seems to still appear
I'm using typescript 2.4.1

[adidahiya]

@jacekjagiello you need to upgrade to @types/react >=15.0.35

[jacekjagiello]

@adidahiya you're right, thanks a lot ;)