Well, this code throws an error in console - "PropTypes is not defined", so application does not render. Any ideas what's wrong in configuration or even code? I am not using eslint if it matters btw.
import React, { Component } from 'react';
import PropTypes from 'prop-types';
export default class Movie extends Component {
static propTypes = {
movie: Proptypes.shape({
title: Proptypes.string.isRequired
})
};
static defaultProps = {
description: 'Description is not available'
}
render() {
return (
<div>
<h3>{this.props.movie.title}</h3>
</div>
)
}
}
However this works as expected(after component):
Movie.propTypes = {
movie: PropTypes.shape({
title: PropTypes.string.isRequired
})
}
package.json configuration:
{
"dependencies": {
"babel-polyfill": "^6.26.0",
"live-server": "^1.2.0",
"normalize.css": "^8.0.0",
"prop-types": "^15.6.1",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-router-dom": "^4.2.2",
"redux": "^3.7.2"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"css-loader": "^0.28.11",
"node-sass": "^4.8.3",
"sass-loader": "^6.0.7",
"style-loader": "^0.20.3",
"webpack": "^4.3.0",
"webpack-cli": "^2.0.13"
}
}
.babelrc configuration:
{
"presets": [
"env",
"react",
"stage-0"
],
"plugins": [
"transform-class-properties"
]
}
webpack.config.js
const path = require('path');
module.exports = {
entry: ['babel-polyfill','./src/app.js'],
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js'
},
module: {
rules: [{
loader: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/,
query: {
presets: ['react', 'env', 'stage-3', 'stage-2', 'stage-1', 'stage-0']
}
}, {
test: /\.s?css$/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
}]
},
devtool: 'cheap-module-eval-source-map',
devServer: {
contentBase: path.join(__dirname, 'public'),
historyApiFallback: true
}
};
You have a typo here:-
static propTypes = {
movie: Proptypes.shape({
title: Proptypes.string.isRequired
})
};
It should be:-
static propTypes = {
movie: PropTypes.shape({
title: PropTypes.string.isRequired
})
};
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.