Я считаю, что мой конфиг веб-пакета может быть виновником или моим 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 строк.
Мой конфиг веб-пакета:
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