myxvisual / react-uwp

📱⌨ React Components that Implement Microsoft's UWP Design & Fluent Design.
https://react-uwp.com
MIT License
1.18k stars 78 forks source link

Typings Issue: `Interface 'ImageProps' cannot simultaneously extend types ...` #54

Open Robert-Fairley opened 6 years ago

Robert-Fairley commented 6 years ago

Problem description

Simple app won't build due to typings issue.

The error at the end of the Webpack build process is:

ERROR in [at-loader] ./node_modules/react-uwp/Image/index.d.ts:18:18
    TS2320: Interface 'ImageProps' cannot simultaneously extend types 'DataProps' and 'HTMLAttributes<HTMLDivElement>'.
  Named property 'placeholder' of types 'DataProps' and 'HTMLAttributes<HTMLDivElement>' are not identical.

Link to minimal working code that reproduces the issue

// tsconfig.json
{
    "compilerOptions": {
        "outDir": "./lib/",
        "sourceMap": true,
        "noImplicitReturns": true,
        "module": "commonjs",
        "target": "es5",
        "jsx": "react",
        "lib": [
            "es2018",
            "dom"
        ],
        "experimentalDecorators": true,
        "noEmitOnError": true,
        "typeRoots": [
            "./node_modules/@types"
        ]
    },
    "include": [
        "./src/**/*"
    ],
    "filesGlob": [
        "**/*.ts",
        "**/*.tsx"
      ],
      "files": [
        "node_modules/react-uwp/index.d.ts"
      ]
}
// index.tsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';

import { App } from './App';

ReactDOM.render(<App/>, document.querySelector('#main'));
// App.tsx
import * as React from 'react';

import { Theme as UWPThemeProvider, getTheme } from 'react-uwp/theme';

import Test from './components/Test';

export class App extends React.Component
{
    render()
    {
        return (
            <UWPThemeProvider
                theme={getTheme({
                    themeName: 'dark',
                    accent: '#0078D7',
                    useFluentDesign: true,
                    desktopBackgroundImage: 'http://localhost:4444/banff_hockey.jpeg',
                })}
            >
                This is a test:
                <Test />
            </UWPThemeProvider>
        )
    }
}
// Test.tsx
import * as React from 'react';
import Button from 'react-uwp/Button';

export default class Test extends React.Component<{}, {}>
{
    render()
    {
        return (
            <Button tooltip="Test button" />
        );
    }
}

Versions