error TS2559: Type '{ children: Element; }' has no properties in common with type 'IonHeaderAttributes'

Bug Report

Ionic version: [x] 4.x

Current behavior: Error using ion-header and ion-toolbar in React projects with typescript. I had to import and specify attribute type definitions on JSX.IntrinsicElements to make it work like so.

import { Components } from '@ionic/core';
import { Components as IoniconComponents } from 'ionicons';

declare global {
  namespace JSX {
    interface IntrinsicElements {
      'ion-content': Components.IonContentAttributes;
      'ion-header': Components.IonHeaderAttributes;
      'ion-toolbar': Components.IonToolbarAttributes;
      'ion-buttons': Components.IonButtonsAttributes;
      'ion-button': Components.IonButtonAttributes;
      'ion-title': Components.IonTitleAttributes;
      'ion-icon': IoniconComponents.IonIconAttributes;
      'ion-toggle': Components.IonToggleAttributes;
      'ion-card': Components.IonCardAttributes;
      'ion-card-content': Components.IonCardContentAttributes;
      'ion-spinner': Components.IonSpinnerAttributes;
      'ion-card-title': Components.IonCardTitleAttributes;
      'ion-card-subtitle': Components.IonCardSubtitleAttributes;
      'ion-text': Components.IonTextAttributes;
      'ion-grid': Components.IonGridAttributes;
      'ion-row': Components.IonRowAttributes;
      'ion-col': Components.IonColAttributes;
      'ion-img': Components.IonImgAttributes;
    }
  }
}

Error:

src/components/Header.tsx(19,8) error TS2559: Type '{ children: Element; }' has no properties in common with type 'IonHeaderAttributes'.
src/components/Header.tsx(20,10): error TS2559: Type '{ children: Element[]; }' has no properties in common with type 'IonToolbarAttributes'.
src/components/Track.tsx(46,12): error TS2559: Type '{ children: Element; }' has no properties in common with type 'IonGridAttributes'.
src/components/VideoPlayer.tsx(55,14): error TS2559: Type '{ children: string; }' has no properties in common with type 'IonCardTitleAttributes'.

But, using it in a component like so, throws up the error. (only with typescript, javascript works fine)

import * as React from 'react';
import { PureComponent } from 'react';

export default class Header extends PureComponent {
  render() {
    return(
      <ion-header>
        <ion-toolbar>
          <ion-buttons slot="start">
            <ion-button color="light" shape="round" fill="clear">
              <ion-icon slot="icon-only" src="assets/icon/logo.svg"></ion-icon>
            </ion-button>
          </ion-buttons>
          <ion-title text-center>Vibration Intellicence - Simulation</ion-title>
        </ion-toolbar>
      </ion-header>
    );
  }
}

Here’s my package.json

{
  "name": "zf-simulator",
  "version": "0.0.1",
  "author": "VIPERdev team",
  "homepage": "http://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/core": "~7.0.0",
    "@capacitor/cli": "1.0.0-beta.11",
    "@capacitor/core": "1.0.0-beta.11",
    "@capacitor/ios": "^1.0.0-beta.11",
    "@ionic/core": "^4.0.0-beta.18",
    "@types/d3": "^5.0.1",
    "@types/react": "^16.7.17",
    "@types/react-dom": "^16.0.11",
    "angular-cli-builders": "^2.1.2",
    "angular-ionic-cli-builders": "^2.1.4",
    "babel-polyfill": "^6.26.0",
    "core-js": "^2.5.4",
    "d3": "^5.7.0",
    "ionicons": "^4.4.8",
    "prop-types": "^15.6.2",
    "react": "^16.4.2",
    "react-dom": "^16.4.2",
    "rxjs": "~6.3.3",
    "svg-gauge": "^1.0.4",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/architect": "~0.10.0",
    "@angular-devkit/build-angular": "~0.10.0",
    "@angular-devkit/core": "~7.0.0",
    "@angular-devkit/schematics": "~7.0.0",
    "@angular/cli": "~7.0.0",
    "@angular/compiler": "~7.0.0",
    "@angular/compiler-cli": "~7.0.0",
    "@angular/language-service": "~7.0.0",
    "@babel/core": "^7.2.0",
    "@babel/preset-env": "^7.2.0",
    "@babel/preset-react": "^7.0.0",
    "@ionic/angular-toolkit": "~1.2.0",
    "@ionic/lab": "1.0.15",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~10.12.0",
    "awesome-typescript-loader": "^5.2.1",
    "babel-loader": "^8.0.4",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "source-map-loader": "^0.2.4",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "^3.1.6",
    "url-loader": "^1.1.2"
  },
  "description": "An Ionic 4 project with React"
}

[jthoms1]

Closing this issue because as of @ionic/react 0.0.3 a lot has changed.

[paulstelzer]

Thanks for your issue. React is in very early alpha stage (see https://github.com/ionic-team/ionic/pull/16748 ). So thanks for your report and hopefully it will be fixed soon 😃