Property 'setUser' does not exist on type 'Readonly & Readonly'

Question

My Reactjs + ElectronJS app work well when I run it with : yarn start. I get this error when I try to build it with : yarn build . I don't understand what' wrong.

Property 'setUser' does not exist on type 'Readonly<{}> & Readonly<{ children?: ReactNode; }>'.

here is the code who make the error :

export const test = () => ({
 type: 'TEST',
});

export const setUser = (mail, pwd, token, firstname, lastname) => ({
type: 'SET_USER',
payload: {
    Email: mail,
    Pwd: pwd,
    Token: token,
    Firstname: firstname,
    Lastname: lastname,
}
});

I'm using it like that somewhere else for my authentication :

  GetInfoFromBack() {
const param : any[] = [];

for (var i = 0; i < arguments.length; ++i) {
  param[i] = arguments[i];
}

if (param[1] === null && param[2] != null) {
  axios.get('http://104.xx.xx.192:xxxx' + param[0], param[2])
  .then(response => {
    if (param[0] === "/get_auth_user") {
      this.props.setUser(response.data.email, this.props.base.Pwd, this.props.base.Token, response.data.firstname, response.data.lastname);
    }
  }).catch(err => {
    alert(err.response.data);
  })
} else {
  alert("ERROR: bad request : " + param);
}
}

user_2257198 · Answer

The error concerns the type inferred for props on your component. It's falling back to the React defaults for props.

Two cases are intersected to define this default...

Readonly<{}> & Readonly<{ children?: ReactNode; }>

a) there are no prop keys

b) there may be a children prop key (if you added some content, e.g. tags, text or render props, to the element via JSX).

To address this issue, you need to be explicit about the type of the props consumed by your component.

From the JSX typescript documentation I believe this might end up looking something like this, to ensure that accesses to this.props can rely on a setUser function...

import {
  setUser
} from './myfile'

interface MyProps {
  children: JSX.Element | JSX.Element[]
  setUser: typeof setUser
}

class Component extends React.Component {
  render() {
    return (
      
        {this.props.children}
      
    )
  }
}

Property 'setUser' does not exist on type 'Readonly<{}> & Readonly<{ children?: ReactNode; }>'

1 Answers