After running sudo npm install prop-types in my react app (created with npx create-react-app), my app fails to compile

0

My app is super simple - just rendering some colored square divs with specific props...could hardly call it an app. Either way, here is the code after I install prop-types:

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class Square extends Component {

static propTypes = {
    initialColor: PropTypes.string.isRequired,
}

render(){
    const style = {
        backgroundColor: this.props.initialColor,
        height: '100px',
        width: '100px',
    }
    return(
        <div>
            <div style={style}></div>
        </div>
    )
}
  }

 export default Square;

 // this is ok too 

 // Square.propTypes = {
//     initialColor: PropTypes.string.isRequired,
// }

And my package.json file:

   {
    "name": "square-playground",
     "version": "0.1.0",
    "private": true,
    "dependencies": {
    "@babel/core": "^7.6.2",
    "prop-types": "^15.7.2",
    "react": "^16.10.2",
    "react-dom": "^16.10.2",
    "react-scripts": "3.2.0"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
     "production": [
     ">0.2%",
    "not dead",
    "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
 "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.6"
 }
}

and finally the main render. Keep in mind that the Square component import is from the correct directory, so that isn't the issue. This all worked fine when I wasn't using PropTypes to validate that a prop is included:

import React from 'react';
import Square from './Square';

function App() {
   return (
         <Square initialColor="green" />
         <Square initialColor="red" />
         <Square initialColor="blue" />
      </div>
   );
 }

 export default App;

In the terminal, after running yarn start, I get the error:

  Failed to compile.

  ./node_modules/prop-types/index.js
  Module not found: Can't resolve 
   '/Users/username/Documents/MyProjects/square- 
  playground/node_modules/react-scripts/node_modules/babel- 
  loader/lib/index.js' in '/Users/username/Documents/MyProjects/square- 
  playground'

I've tried sudo npm install babel-loader --save-dev, and sudo npm install babel-core --save-dev, as well as sudo npm install @babel/core --save (all of this from the project root directory, not in src). Maybe there are version conflicts between babel-loader and babel-core? What could be the issue here? I'm at a complete loss. Any help would be greatly appreciated.

M. Greco

Posted 2019-10-04T15:37:33.800

Reputation: 1

Actually, amazingly, this works if one uses npm start instead of yarn start. I think maybe this is because it needs to find the module in package-lock.json instead of yarn.lock. – M. Greco – 2019-10-04T16:05:40.583

No answers