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.
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