Почему выдает ошибку «Cannot read property of undefined» при попытке обратиться к свойствам PropTypes?

Question

[UncleDenn]

Пытаюсь собрать проект, но выдает ошибку:

children: _react.PropTypes.node
                             ^

TypeError: Cannot read property 'node' of undefined
    at Object.<anonymous> (C:/react/izomorf-app/src/components/App/App.js:10:23)
    at Module._compile (module.js:643:30)
    at loader (C:\react\izomorf-app\node_modules\babel-register\lib\node.js:144:5)
    at Object.require.extensions.(anonymous function) [as .js] (C:\react\izomorf-app\node_modules\babel-register\lib\node.js:154:7)
    at Module.load (module.js:556:32)
    at tryModuleLoad (module.js:499:12)
    at Function.Module._load (module.js:491:3)
    at Module.require (module.js:587:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (C:/react/izomorf-app/src/components/App/index.js:1:1)

App.js

import React, { Component, PropTypes } from 'react';
import Grid  from 'react-bootstrap/lib/Grid';
import Nav from 'react-bootstrap/lib/Nav';
import Navbar from 'react-bootstrap/lib/Navbar';
import NavItem  from 'react-bootstrap/lib/NavItem';

import './bootstrap.css';

 const propTypes = {
  children: PropTypes.node //тут ошибка 
 };

class App extends Component {
  render() {
    return (
      <div>
        <Navbar>
          <Navbar.Header>
            <Navbar.Brand>
              <span>Hello World</span>
            </Navbar.Brand>
            <Navbar.Toggle />
          </Navbar.Header>
          <Navbar.Collapse>
            <Nav navbar>
              <NavItem>Время</NavItem>
              <NavItem>Счетчики</NavItem>
            </Nav>
          </Navbar.Collapse>
        </Navbar>
        <Grid>
          {this.props.children}
        </Grid>
      </div>
    );
  }
}

App.propTypes = propTypes;

export default App;

package.json

{
  "name": "izomorf-app",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "build": "set NODE_ENV='production' && webpack -p",
    "webpack-devserver": "webpack-dev-server --debug --hot --devtool eval-source-map --output-pathinfo --watch --colors --inline --content-base public --port 8050 --host 0.0.0.0",
    "nodemon": "set NODE_PATH=./src; && nodemon server.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.26.3",
    "babel-plugin-transform-decorators-legacy": "^1.3.5",
    "babel-polyfill": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "bluebird": "^3.5.1",
    "express": "^4.16.3",
    "react": "^16.4.0",
    "react-bootstrap": "^0.32.1",
    "react-dom": "^16.4.0"
  },
  "devDependencies": {
    "babel-eslint": "^8.2.3",
    "babel-loader": "^7.1.4",
    "clean-webpack-plugin": "^0.1.19",
    "css-loader": "^0.28.11",
    "eslint": "^4.19.1",
    "eslint-loader": "^2.0.0",
    "eslint-plugin-react": "^7.9.1",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "file-loader": "^1.1.11",
    "html-loader": "^0.5.5",
    "json-loader": "^0.5.7",
    "less": "^3.0.4",
    "less-loader": "^4.1.0",
    "nodemon": "^1.17.5",
    "postcss-loader": "^2.1.5",
    "react-hot-loader": "^1.3.0",
    "react-router": "^4.3.1",
    "style-loader": "^0.21.0",
    "url-loader": "^1.0.1",
    "webpack": "^4.8.3",
    "webpack-cli": "^3.0.4",
    "webpack-dev-server": "^3.1.4"
  }
}

Answer 1

[0xD34F]

"react": "^16.4.0",

import React, { Component, PropTypes } from 'react';

Понятно. Открываем документацию, и видим, что

Note:
React.PropTypes has moved into a different package since React v15.5. Please use the prop-types library instead.

Comments

[Максим]

строго по делу

[UncleDenn]

А еще вопрос
такая ошибка

TypeError: (0 , _reactRouter.match) is not a function
    at C:/react/izomorf-app/src/server.js:15:1
    at Layer.handle [as handle_request] (C:\react\izomorf-app\node_modules\express\lib\router\layer.js:95:5)
    at trim_prefix (C:\react\izomorf-app\node_modules\express\lib\router\index.js:317:13)
    at C:\react\izomorf-app\node_modules\express\lib\router\index.js:284:7
    at Function.process_params (C:\react\izomorf-app\node_modules\express\lib\router\index.js:335:12)
    at next (C:\react\izomorf-app\node_modules\express\lib\router\index.js:275:10)
    at expressInit (C:\react\izomorf-app\node_modules\express\lib\middleware\init.js:40:5)
    at Layer.handle [as handle_request] (C:\react\izomorf-app\node_modules\express\lib\router\layer.js:95:5)
    at trim_prefix (C:\react\izomorf-app\node_modules\express\lib\router\index.js:317:13)
    at C:\react\izomorf-app\node_modules\express\lib\router\index.js:284:7

import express  from 'express';
import React    from 'react';

import ReactDOM from 'react-dom';
import {match, RouterContext } from 'react-router';
import routes from './routes';

import {renderToString, renderToStaticMarkup} from 'react-dom/server';

const app = express();
const ReactDOMServer = require('react-dom/server');

app.use((req, res) => {
  
match({ routes, location: req.url }, (error, redirectLocation, renderProps) => {
  if(redirectLocation) {
    return res.redirect(301, redirectLocation.pathname + redirectLocation.search);
  }

  if(error) {
    return res.status(500).send(error.message);
  }

  if(!renderProps) {
    return res.status(404).send('Not faund');
  }

  const componentHTML = ReactDOM.renderToString(<RouterContext {...renderProps} />);

  return res.end(renderHTML(componentHTML));
});
												  
	return res.end(renderHTML(componentHTML));											  
});
   
const assetUrl  = process.env.NODE_ENV !== "production" ? 'http://localhost:8050' : '/';

function renderHTML(componentHTML) {
  return `
    <!DOCTYPE html>
      <html>
      <head>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Hello React</title>
          <link rel="stylesheet" href="${assetUrl}/public/styles.css">
      </head>
      <body>
        <div id="react-view">${componentHTML}</div>
        <script type="application/javascript" src="${assetUrl}/public/bundle.js"></script>
      </body>
    </html>
  `;
}

const PORT = process.env.PORT || 3001;

app.listen(PORT, () => {
	console.log("server listening on: $(PORT)");
})