Where to begin...I'm using the create-react-app that generates a starter reactjs-redux-typescript-webpack-donetcore app. During the build, it is throwing many errors that appear to be similar in nature - react type mismatches. The generated code appears to be aligned with other examples I'm finding online so it isn't clear to me what is wrong or how to resolve these errors. I'll list the appropriate config files, the offending tsx files, and the first error (as it is common for the other tsx files).
what I tried
I thought that the issue would be related to the new reactjs rewrite (v16) having a incompatibility issue with the generated code so I used the react-codemod migration utility against the codebase - no modified files resulted.
TIP use -d for dry run
In the mean time, I'll read up on tsx/jsx and see if anything clicks because all things reactjs/typescript is new to me.
webpack command:
webpack -d --config webpack.config.js --colors --display-error-details
package.json dependencies used
"@types/classnames": "2.2.3",
"@types/history": "4.6.0",
"@types/react": "^16.0.10",
"@types/react-dom": "16.0.0",
"@types/react-hot-loader": "3.0.4",
"@types/react-redux": "5.0.10",
"@types/react-router": "4.0.15",
"@types/react-router-dom": "4.0.8",
"@types/react-router-redux": "5.0.8",
"@types/webpack": "3.0.13",
"@types/webpack-env": "1.13.1",
"aspnet-prerendering": "^3.0.1",
"aspnet-webpack": "^2.0.1",
"aspnet-webpack-react": "^3.0.0",
"babel-preset-env": "^1.6.0",
"history": "4.7.2",
"prop-types": "^15.6.0",
"react": "16.0.0",
"react-dom": "16.0.0",
"react-hot-loader": "3.0.0-beta.7",
"react-redux": "5.0.6",
"react-router-dom": "4.2.2",
"react-router-redux": "5.0.0-alpha.6",
"redux": "3.7.2",
"redux-logger": "^3.0.6",
"redux-thunk": "2.2.0",
"style-loader": "0.19.0",
"typescript": "^2.5.3",
"webpack": "3.6.0",
"webpack-merge": "4.1.0"
"awesome-typescript-loader": "^3.2.3",
"babel-cli": "^6.26.0",
"babel-preset-react": "^6.24.1",
"react-scripts": "^1.0.14",
tsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"module": "es2015",
"moduleResolution": "node",
"target": "es5",
"jsx": "react",
"experimentalDecorators": true,
"sourceMap": true,
"skipDefaultLibCheck": true,
"strict": true,
"lib": ["es6", "dom"],
"types": ["webpack-env"]
},
"exclude": [
"bin",
"node_modules"
]
}
the error
ERROR in [at-loader] ./ClientApp/boot-client.tsx:36:9
TS2322: Type '{ children: Element; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<AppContainer> & Readonly<{ children?: ReactNode; }...'.
Type '{ children: Element; }' is not assignable to type 'Readonly<AppContainerProps>'.
Types of property 'children' are incompatible.
Type 'Element' is not assignable to type 'ReactElement<any> | undefined'.
Type 'Element' is not assignable to type 'ReactElement<any>'.
ERROR in [at-loader] ./ClientApp/boot-client.tsx:36:9
TS2322: Type '{ children: Element; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<AppContainer> & Readonly<{ children?: ReactNode; }...'.
Type '{ children: Element; }' is not assignable to type 'Readonly<AppContainerProps>'.
Types of property 'children' are incompatible.
Type 'Element' is not assignable to type 'ReactElement<any> | undefined'.
Type 'Element' is not assignable to type 'ReactElement<any>'.
Types of property 'type' are incompatible.
Type 'string | React.ComponentClass<any> | React.StatelessComponent<any>' is not assignable to type 'string | React.ComponentClass<any> | React.StatelessComponent<any>'. Two different types with this name exist, but they are unrelated.
Type 'ComponentClass<any>' is not assignable to type 'string | ComponentClass<any> | StatelessComponent<any>'.
Type 'ComponentClass<any>' is not assignable to type 'StatelessComponent<any>'.
Type 'ComponentClass<any>' provides no match for the signature '(props: any, context?: any): ReactElement<any> | null'.
ERROR in [at-loader] ./ClientApp/boot-client.tsx:36:9
TS2345: Argument of type 'Element' is not assignable to parameter of type 'ReactElement<any>'.
ERROR in [at-loader] ./ClientApp/boot-server.tsx:28:24
TS2345: Argument of type 'Element' is not assignable to parameter of type 'ReactElement<any>'.
ERROR in [at-loader] ./ClientApp/boot-server.tsx:40:38
TS2345: Argument of type 'Element' is not assignable to parameter of type 'ReactElement<any>'.
ERROR in [at-loader] ./ClientApp/components/Counter.tsx:31:3
TS2345: Argument of type 'typeof Counter' is not assignable to parameter of type 'ComponentType<CounterState & { increment: () => IncrementCountAction; decrement: () => DecrementC...'.
Type 'typeof Counter' is not assignable to type 'StatelessComponent<CounterState & { increment: () => IncrementCountAction; decrement: () => Decre...'.
Type 'typeof Counter' provides no match for the signature '(props: CounterState & { increment: () => IncrementCountAction; decrement: () => DecrementCountAction; } & { children?: ReactNode; }, context?: any): ReactElement<any> | null'.
boot-client.tsx
import './css/site.css';
import 'bootstrap';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { AppContainer } from 'react-hot-loader';
import { Provider } from 'react-redux';
import { ConnectedRouter } from 'react-router-redux';
import { createBrowserHistory } from 'history';
import configureStore from './configureStore';
import { ApplicationState } from './store';
import * as RoutesModule from './routes';
let routes = RoutesModule.routes;
// Create browser history to use in the Redux store
const baseUrl = document.getElementsByTagName('base')[0].getAttribute('href')!;
const history = createBrowserHistory({ basename: baseUrl });
// Get the application-wide store instance, prepopulating with state from the server where available.
const initialState = (window as any).initialReduxState as
ApplicationState;
const store = configureStore(history, initialState);
function renderApp() {
// This code starts up the React app when it runs in a browser. It sets up the routing configuration
// and injects the app into a DOM element.
ReactDOM.render(
<AppContainer>
<Provider store={ store }>
<ConnectedRouter history={ history } children={ routes } />
</Provider>
</AppContainer>,
document.getElementById('react-app')
);
}
renderApp();
// Allow Hot Module Replacement
if (module.hot) {
module.hot.accept('./routes', () => {
routes = require<typeof RoutesModule>('./routes').routes;
renderApp();
});
}
Counter.tsx
import * as React from 'react';
import { Link, RouteComponentProps } from 'react-router-dom';
import { connect } from 'react-redux';
import { ApplicationState } from '../store';
import * as CounterStore from '../store/Counter';
import * as WeatherForecasts from '../store/WeatherForecasts';
type CounterProps = CounterStore.CounterState & typeof CounterStore.actionCreators & RouteComponentProps<{}>;
class Counter extends React.Component<CounterProps, {}> {
public render() {
return (
<div>
<h1>Counter</h1>
<p>This is a simple example of a React component.</p>
<p>Current count: <strong>{this.props.count}</strong></p>
<button className="btn btn-default" onClick={() => { this.props.increment() }}>Increment</button>
<button className="btn btn-default" onClick={() => { this.props.decrement() }}>Decrement</button>
</div>
);
}
}
// Wire up the React component to the Redux store
export default connect(
(state: ApplicationState) => state.counter, // Selects which state properties are merged into the component's props
CounterStore.actionCreators // Selects which action creators are merged into the component's props
)(Counter);
