Property 'profileStore' is missing in type '{}' but required in type 'Readonly<AppProps>'.ts(2741)

Question

I am using mobx react a type script

Why does <MainNote/> show the error

Do i just need to set default props?

Property 'profileStore' is missing in type '{}' but required in type 'Readonly<AppProps>'.ts(2741)
MainNote.tsx(9, 3): 'profileStore' is declared here.
(alias) class MainNote
import MainNote

I do not want to pass the prop in as it is a prop ejected by mobx.

Thanks for the help

---

The code is below

---

import React, { Component } from 'react';
import MainNote from './MainNote';
import { observable, computed } from 'mobx'
import { observer, inject, IStoresToProps } from 'mobx-react'
import { IStore } from '../interfaces/store/IStore'
import style from '../styles/App.module.css';
import { IProfileStore } from '../interfaces/Profile/IProfileStore';
import { iProfile } from '../interfaces/Profile/iProfile';


interface AppProps {
  profileStore?: IProfileStore
}

export interface IProfileStore {
    profile: iProfile,
    counter: number,
    loadProfile?: () => void
  }

@inject("profileStore")
@observer
class App extends Component<AppProps> {
  static defaultProps = { profileStore: {counter: 0}};
  render() {
    return (
      <div className={`container-fluid w-100 h-100 ${style.background}`}>
        <MainNote/>
        {console.log('props', this.props.profileStore) }
      </div>
    );
  }
}

export default App;

import React, { Component } from 'react';
import { observable, computed } from 'mobx'
import { observer, inject, IStoresToProps } from 'mobx-react'
import style from '../styles/MainNote.module.css'
import { IStore } from '../interfaces/store/IStore'
import {IProsStore} from '../interfaces/store/IPropsStore'

interface AppProps {
  profileStore: IProfileStore;
}

interface IProfileStore {
  profile: iProfile;
  counter: number;
  loadProfile?: () => void;
}

interface iProfile
{
    Details: iDetails;
    Address: iAddress;
    Notes: iNote[];
}

interface iDetails
{
    Name: string;
    Email: string;
    Age: number;
    CellNumber: number;
}

interface iAddress
{
    No: number;
    Road: string;
    Street: string;
    Place: string;
}

interface iNote
{
    Date: Date | string;
    Subject: string;
    Text: string;
    Private: boolean;
    Archived: boolean;
}




@inject("profileStore")
@observer
class MainNote extends Component<AppProps> {
  render() {
    const { Address } = this.props.profileStore.profile;

    console.log('s', this.props.profileStore.profile.Address.No)
    return (
      <div className={style.makeLookCool}>
        <ul className="list-group">
          <li className="list-group-item">{Address.No} {Address.Place} {Address.Road} {Address.Street}</li>
        </ul>

      </div>
    );
  }
}

export default MainNote;

import React from 'react';
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.css';
import './styles/index.css';
import App from "./componenets/App";
import { Provider } from 'mobx-react';
import {IProsStore} from './interfaces/store/IPropsStore'

import * as serviceWorker from './serviceWorker';


// import NotesStore from "./NotesStore";
// import CounterStore from "./CounterStore";
import ProfileStore from './store/ProfileStore';
import { IStore } from './interfaces/store/IStore';

const Store: IStore = {
    profileStore: new ProfileStore(),
};

ReactDOM.render(
    <Provider {...Store}>
        <App />
    </Provider>,
document.getElementById('root'));

Solution 1

The answer is to set the default prop in the component

  static defaultProps = {profileStore:{}}

Solution 2

Make profileStore props mandatory from:

interface AppProps {
  profileStore: IProfileStore;
}

to optional

interface AppProps {
  profileStore?: IProfileStore;
}