我相信我的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只是引用了我在为我的React应用程序提供服务的端点。
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
答案 0 :(得分:2)
尝试在webpack配置中添加devtool,例如'devtool:“#source-map”'