运行应用程序时,出现标题问题中提到的错误。注意:我没有在组件中使用propTypes
,我知道propTypes
在新React中的单独库中。但是不知道这个错误是从哪里产生的。大概有模块版本的东西吗?我将为package.json
和webpack.config.js
提供代码。...
这里有package.json
个依赖项和devDependencies:
"devDependencies": {
"babel-core": "^6.26.3",
"babel-eslint": "^8.2.5",
"babel-loader": "^7.1.4",
"babel-minify-webpack-plugin": "^0.3.1",
"babel-plugin-module-resolver": "^3.1.1",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-es2015-destructuring": "^6.23.0",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"clean-webpack-plugin": "^0.1.19",
"css-loader": "^0.28.11",
"eslint": "^5.0.1",
"eslint-import-resolver-babel-module": "^4.0.0",
"eslint-import-resolver-webpack": "^0.10.1",
"eslint-loader": "^2.0.0",
"eslint-plugin-import": "^2.13.0",
"eslint-plugin-react": "^7.10.0",
"file-loader": "^1.1.11",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"json-loader": "^0.5.7",
"mini-css-extract-plugin": "^0.4.1",
"node-sass": "^4.9.2",
"sass-loader": "^7.0.3",
"style-loader": "^0.21.0",
"uglifyjs-webpack-plugin": "^1.2.7",
"webpack": "^4.16.1",
"webpack-cli": "^3.0.8",
"webpack-dev-server": "^3.1.4"
},
"dependencies": {
"axios": "^0.18.0",
"babel-polyfill": "^6.26.0",
"react": "^16.4.1",
"react-bootstrap": "^0.32.1",
"react-document-title": "^2.0.3",
"react-dom": "^16.4.1",
"react-facebook-login": "^4.0.1",
"react-google-login": "^3.2.1",
"react-redux": "^5.0.7",
"react-router-dom": "^4.3.1",
"react-stormpath": "^2.0.1",
"redux": "^4.0.0",
"redux-thunk": "^2.3.0"
}
这是webpack.config.js
:
'use strict';
const path = require('path');
const webpack = require('webpack');
const HtmlWebPackPlugin = require("html-webpack-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const paths = {
SRC: path.resolve(__dirname, 'src'), // Source folder path
DIST: path.resolve(__dirname, 'dist'), // Webpack bundling destination folder
};
// Webpack configuration
module.exports = (env, options) => {
return {
mode: options.mode,
entry: path.join(paths.SRC, 'index.jsx'),
output: {
path: paths.DIST,
filename: 'index.bundle.js'
},
plugins: [
new HtmlWebPackPlugin({
hash: true,
template: path.join(paths.SRC, 'index.html'),
filename: "./index.html"
}),
new MiniCssExtractPlugin({
filename: 'index.bundle.css'
}),
new webpack.LoaderOptionsPlugin({
options: {}
}),
new webpack.HotModuleReplacementPlugin(),
new CleanWebpackPlugin(['dist'])
],
// Loaders configuration
module: {
rules: [
{
enforce: 'pre',
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: 'eslint-loader'
},
{
test: /\.(js|jsx)$/,
include: paths.SRC,
exclude: /node_modules/,
loader: 'babel-loader',
},
{
test: /\.json?$/,
exclude: /node_modules/,
loader: 'json-loader'
},
{
test: /\.html$/,
exclude: /node_modules/,
use: [
{
loader: "html-loader",
options: {minimize: true}
}
]
},
{
test: /(\.css|\.scss)$/,
exclude: /node_modules/,
use: [
MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: {
minimize: true,
sourceMap: true
}
},
{
loader: "sass-loader"
}
]
},
{
test: /\.(jpe?g|png|gif)$/i,
loader: "file-loader"
},
{
test: /\.(woff|ttf|otf|eot|woff2|svg)$/i,
loader: "file-loader"
}
]
},
stats: {
colors: true,
warnings: false
},
resolve: {
extensions: ['.js', '.jsx', '.css', '.scss']
},
devServer: {
port: 8081,
historyApiFallback: true
}
};
};