SPFx react cannot read property 'shape' of undefined

Question

Hi I am creating an SPFX weather webpart and i am getting this error:

there are no errors when i run gulp build. i am not sure how to debug my issue. this is the snippet of the proptypes.shape() where i am getting my issue:

import * as React from 'react';
import PropTypes from 'prop-types';
    export const Day: React.SFC<any> = props => {
      const date = props.day.dt;
      const icon = getIcon(props.day.weather[0].id);
      const animate = true;
      const iconSize = 64;
      const iconColor = 'black';
      return (
        <div className={appClasses.dayContainer} onClick={props.onClick} role="link">
            <h2 className={appClasses.date}>{(new Date(date * 1000)).toDateString()} - {(new Date(date * 1000)).toLocaleTimeString()}</h2>
           <ReactAnimatedWeather
                icon={icon}
                color={iconColor}
                size={iconSize}
                animate={animate}
            />
        </div>
      );
    };

    Day.defaultProps = {
      onClick: () => {},
    };

    Day.propTypes = {
      day: PropTypes.shape({
        dt: PropTypes.number.isRequired,
        weather: PropTypes.array.isRequired,
      }).isRequired,
      onClick: PropTypes.func,
    };

I'd like to note that i created the webpart first using react and it is working perfectly, but when i created an SPFX app, and transferred my existing codes into it. I had encountered these errors.

This is my package.json

{
  "name": "spfx-weather-2",
  "version": "0.0.1",
  "private": true,
  "engines": {
    "node": ">=0.10.0"
  },
  "dependencies": {
    "@microsoft/sp-core-library": "~1.1.0",
    "@microsoft/sp-webpart-base": "~1.1.1",
    "@types/react": "0.14.46",
    "@types/react-addons-shallow-compare": "0.14.17",
    "@types/react-addons-test-utils": "0.14.15",
    "@types/react-addons-update": "0.14.14",
    "@types/react-dom": "0.14.18",
    "@types/webpack-env": ">=1.12.1 <1.14.0",
    "prop-types": "^15.6.1",
    "react": "15.4.2",
    "react-animated-weather": "^1.0.3",
    "react-dom": "15.4.2",
    "react-router-dom": "^4.2.2"
  },
  "devDependencies": {
    "@microsoft/sp-build-web": "~1.1.0",
    "@microsoft/sp-module-interfaces": "~1.1.0",
    "@microsoft/sp-webpart-workbench": "~1.1.0",
    "gulp": "~3.9.1",
    "@types/chai": ">=3.4.34 <3.6.0",
    "@types/mocha": ">=2.2.33 <2.6.0"
  },
  "scripts": {
    "build": "gulp bundle",
    "clean": "gulp clean",
    "test": "gulp test"
  }
}

score 0 · Answer 1 · answered May 08 '18 at 15:34

Check my answer here [SPLoaderError.loadComponentError]: ***Failed to load component

You very likely have the same issue. If you were to post your github link for me to clone I could confirm for you.

TL;DR

You likely have a circular reference between your factories. You need to move any code that is required from your top level factory to the bottom of said factory.

Let me know if you don't quite understand after reading my other answer.

SPFx react cannot read property 'shape' of undefined

1 Answers1