我相信我的webpack配置可能是罪魁祸首或我的npm run dev
脚本,但我不确定是什么问题。当我在开发模式下运行我的应用程序时,我收到如下错误消息:
Uncaught TypeError: this.props.contacts.map is not a function
at ContactList.renderList (ContactList.jsx:46)
at ContactList.render (ContactList.jsx:61)
at finishClassComponent (react-dom.development.js:14695)
at updateClassComponent (react-dom.development.js:14650)
at beginWork (react-dom.development.js:15598)
at performUnitOfWork (react-dom.development.js:19266)
at workLoop (react-dom.development.js:19306)
at HTMLUnknownElement.callCallback (react-dom.development.js:149)
at Object.invokeGuardedCallbackDev (react-dom.development.js:199)
at invokeGuardedCallback (react-dom.development.js:256)
但我的ContactList.jsx只有36行。
我的webpack配置:
module.exports = {
mode: 'development',
entry: './client/index.js',
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-react']
}
}
}
]
},
resolve: {
extensions: ['*', '.js', '.jsx']
},
output: {
path: __dirname + '/dist',
publicPath: '/',
filename: 'bundle.js'
},
devServer: {
contentBase: './dist'
}
};
脚本:
"scripts": {
"start": "npx webpack --mode=development && node server/server.js",
"build": "webpack --mode=development",
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --config ./webpack.config.js --mode development"
}
我认为另一个重要细节是我通过快速服务器为我的前端应用程序提供服务。这是我正在尝试调试的前端应用程序。我可以将它打包成开发模式或类似的东西吗?
我正在提供一个html和bundle.js文件。 HTML只引用我正在为我的反应应用程序提供服务的端点。
index.html的:
<!DOCTYPE html>
<html>
<head>
<title>The Minimal React Webpack Babel Setup</title>
</head>
<body>
<div id="app"></div>
<script src="./dist/bundle.js"></script>
</body>
</html>
我的应用程序在这里:
https://github.com/int-a/contacts/tree/split-first-last-name
尝试在webpack配置中添加devtool,比如'devtool:“#source-map”'