在 React 中出现错误 "PropTypes is not defined"
Getting error "PropTypes is not defined" in React
好吧,此代码在控制台中抛出错误 - "PropTypes is not defined",因此应用程序不会呈现。任何想法配置甚至代码有什么问题?顺便说一句,我不会使用 eslint。
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>
)
}
}
但是这按预期工作(在组件之后):
Movie.propTypes = {
movie: PropTypes.shape({
title: PropTypes.string.isRequired
})
}
package.json配置:
{
"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 配置:
{
"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
}
};
你这里有错字:-
static propTypes = {
movie: Proptypes.shape({
title: Proptypes.string.isRequired
})
};
应该是:-
static propTypes = {
movie: PropTypes.shape({
title: PropTypes.string.isRequired
})
};
好吧,此代码在控制台中抛出错误 - "PropTypes is not defined",因此应用程序不会呈现。任何想法配置甚至代码有什么问题?顺便说一句,我不会使用 eslint。
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>
)
}
}
但是这按预期工作(在组件之后):
Movie.propTypes = {
movie: PropTypes.shape({
title: PropTypes.string.isRequired
})
}
package.json配置:
{
"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 配置:
{
"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
}
};
你这里有错字:-
static propTypes = {
movie: Proptypes.shape({
title: Proptypes.string.isRequired
})
};
应该是:-
static propTypes = {
movie: PropTypes.shape({
title: PropTypes.string.isRequired
})
};