propTypes warning in Electron app

I am trying to deal with the new warning about needing to include the prop-types package in NPM programs. My app is an electron app.

I think I am following the migration strategy from the React folks: https://facebook.github.io/react/blog/2017/04/07/react-v15.5.0.html

react version-15.4.2, prop-types version 15.5.8, react-dom 15.42.2

However, I am still getting the warning after adding the prop-types package.

This is the component (Dashboard.jsx)

const React = require('react')
const { Component } = require('react')
const {} = require('react-bootstrap')
import PropTypes from 'prop-types'
import { App, Title, Section, Header, Footer, Columns, Box, Button } from 'grommet'


export const Page = props => (
  <App>
    <Title>Dashboard Version 1.0, Node version: xxx</Title>
    <Section>Status Section
      <p>Status: {props.serverState}</p>
    </Section>
    <Section >{/*  colorIndex='neutral-1' */ }
      <Header>Controls</Header>
      <Columns>
        <Box pad='small'>
        <Button label='Install' onClick={props.installAct}></Button>
        </Box>
        <Box pad='small'>
        <Button label='UnInstall' onClick={props.uninstallAct}></Button>
        </Box>
        <Box pad='small'>
        <Button label='Start' onClick={props.startAct}></Button>
        </Box>
        <Box pad='small'>
        <Button label='Stop' onClick={props.stopAct}></Button>
        </Box>
      </Columns>
    </Section>
    <Section>
      <Header>Config</Header>
    </Section>
    <Section>
      <Header>Cleanup</Header>
    </Section>
    <Footer></Footer>
  </App>
)

And this is the main render process (dash.js)

const { ipcRenderer, remote } = require('electron')
const { createStore } = require('redux')
const { composeWithDevTools } = require('redux-devtools-extension')
const { Page } = require('../jsxo/Dashboard.js')
const React = require('react');
const ReactDOM = require('react-dom')
const PropTypes = require('prop-types')
const Immutable = require('immutable')

document.addEventListener("DOMContentLoaded", render)



const page = React.createElement(Page, { serverState: 'UP', 
        installAct: () => alert('install'),
        uninstallAct: () => alert('uninstall'),
        startAct: () => alert('start'),
        stopAct: () => alert('stop') })


function render() {
    ReactDOM.render(page, document.getElementById('page'))
}

Here is Solutions:

We have many solutions to this problem, But we recommend you to use the first solution because it is tested & true solution that will 100% work for you.

Solution 1

You are using grommet which hasn’t been updated to the new react version yet, therefore you will be getting warnings from this library because it uses the deprecated PropTypes from react module.

There is nothing you can do until your dependencies are updated, too.

Note this has been already reported and there is a pull request open.

Note: Use and implement solution 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply