Type '{}' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly<{ children?: ReactNode; }>...'.

[ILL35T]

Hey guys I am new to react, redux and typescript and I have been following the SPA template for React and Redux in VS2017.

I keep getting this error:

ERROR in [at-loader] ./ClientApp/components/Layout.tsx:9:15
TS2322: Type '{}' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly<{ children?: ReactNode; }>...'.
Type '{}' is not assignable to type 'Readonly'.
Property 'isLoading' is missing in type '{}'.

import * as React from 'react';
import { Link } from 'react-router-dom';
import { LinkContainer } from 'react-router-bootstrap';
import { Nav } from 'react-bootstrap';
import * as SportsState from '../store/Sport';
import { RouteComponentProps } from 'react-router';
import { ApplicationState } from '../store';
import { connect } from 'react-redux';

// At runtime, Redux will merge together...
type SportProps =
    SportsState.SportsState        // ... state we've requested from the Redux store
    & typeof SportsState.actionCreators      // ... plus action creators we've requested
    & RouteComponentProps<{}>;


export class NavScroller extends React.Component<SportProps> {
    componentWillMount() {
        // This method runs when the component is first added to the page
        //this.props.requestSports();
    }

    public render() {
        return <div className="nav-scroller bg-white box-shadow mb-4">
            <Nav className="nav nav-underline" >
                {this.props.sports && this.props.sports.map(sport =>
                    <Link className='nav-link' to={`/Sport/${sport.id}`}>
                        <img src={`../images/icons/${sport.name}.svg`}/>{sport.name}
                    </Link>
                )} 
            </Nav>
        </div>
    }
}
export default connect(
    (state: ApplicationState) => state.sports, // Selects which state properties are merged into the component's props
    SportsState.actionCreators                 // Selects which action creators are merged into the component's props
)(NavScroller) as any;

import * as React from 'react';
import { NavMenu } from './NavMenu';
import { NavScroller } from './NavScroller';

export default class Layout extends React.Component<{}> {
    public render() {
        return <div>
            <NavMenu />
            <NavScroller/> <-----ERROR IS HERE
            {this.props.children}
        </div>;
    };
}

You'll have to bring the problem down to size so it fits in one file. I'm having trouble reproducing it. Also, make sure you're using typescript@next.

[ILL35T]

@Andy-MS Changing to the latest version of typescript creates a whole bunch of errors to the SPA Template found in VS2017 for React Redux. Since I am working off the template I have logged an issue here: aspnet/JavaScriptServices#1497

I will have to wait for feedback for the above before I can proceed to solving my issue.

It would be most helpful if someone created a new SPA template for React/Redux with the latest typescript and at least a form that does basic crud. A login would also be helpul. Following the existing template isnt enough to build business applications and requires a lot of google searches which mostly brings back results on react use in a non typescript environment and trying to get redux to work on top of that adds to the difficulty.

[joeaguy]

The work around I found was to make any injected property keys options, and keep the others as required. Typescript then complains about objects that can be undefined, but it is easy to add in a few conditionals to shut that up. I then end up with the injected property not being there during componentDidMount and instead need to pick it up during componentWillReceiveProps. So a bunch of extra code for no real reason, but with a little boilerplate I got it all to work happily.

Here's an example

import * as React from 'react';
import { inject, observer } from 'mobx-react';
import { Segment, Dimmer, Loader } from 'semantic-ui-react';
import JSONTree from 'react-json-tree';
import { BranchesModelType } from './BranchesModel';

type PushesPropsType = {
  branches?: BranchesModelType;
  branchName: string | null;
};
@inject('branches')
@observer
class Pushes extends React.Component<PushesPropsType, {}> {

  public componentWillReceiveProps(nextProps: PushesPropsType) {
    const branchName = nextProps.branchName;
    if (!branchName || !nextProps.branches) {
      return;
    }
    console.log(branchName);
    nextProps.branches.getBranchPushes({ branchName });
  }

  public render() {
    if (!this.props.branches) {
      return;
    }
    const branchDetail = this.props.branches.detail;
    const pushes = branchDetail.pushes;

    return (
      <Segment basic={true}>
        <Dimmer active={pushes === null}>
          <Loader content="Loading" />
        </Dimmer>
        <JSONTree data={pushes || {}} />
      </Segment>
    );
  }
}

export default Pushes;

[typescript-bot]

Automatically closing this issue for housekeeping purposes. The issue labels indicate that it is unactionable at the moment or has already been addressed.

[RomanIvanovMinsk]

It's still reprodusuble. And break process of development. Whenever I can't add children component to any element without getting this error

@RomanIvanovMinsk Could you create a new issue containing your repro?

[harshita-gupta]

@Andy-MS I'm running into this as well, will create a new issue