无法在Docker容器中构建React应用程序。

huangapple
go评论66阅读模式
英文:

Can't build React application in Docker container

问题

Here is the translation of your provided text:

尝试在Docker容器中构建React应用程序。在最后阶段出现了HookWebPackError错误。无论我做什么，它都无法编译。我不确定是Webpack问题还是Node版本错误。昨天它能正常工作，但今天不行。我不确定CSS Loader是什么。我认为它是一个默认模块。

这是我的package.json文件：

{
  "name": "ui",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@artsy/fresnel": "^6.1.0",
    "@azure/msal-browser": "^2.36.0",
    "@azure/msal-react": "^1.5.6",
    "@emotion/react": "^11.10.6",
    "@emotion/styled": "^11.10.6",
    "@fullcalendar/core": "^6.1.5",
    "@fullcalendar/daygrid": "^6.1.5",
    "@fullcalendar/interaction": "^6.1.5",
    "@fullcalendar/list": "^6.1.5",
    "@fullcalendar/react": "^6.1.5",
    "@fullcalendar/rrule": "^6.1.5",
    "@fullcalendar/timegrid": "^6.1.5",
    "@material-ui/core": "^4.12.4",
    "@monaco-editor/react": "^4.5.0",
    "@mui/icons-material": "^5.11.16",
    "@mui/material": "^5.12.1",
    "@okta/okta-auth-js": "^7.2.0",
    "@okta/okta-react": "^6.7.0",
    "@react-pdf/renderer": "^3.1.9",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@tinymce/tinymce-react": "^4.3.0",
    "axios": "^1.3.6",
    "chart.js": "^2.9.4",
    "firebase": "^9.20.0",
    "google-map-react": "^2.2.0",
    "js-file-download": "^0.4.12",
    "mui-datatables": "^4.3.0",
    "react": "^18.2.0",
    "react-beautiful-dnd": "^13.1.1",
    "react-chartjs-3": "^2.7.7",
    "react-data-table-component-extensions": "^1.6.0",
    "react-debounce-input": "^3.3.0",
    "react-dom": "^18.2.0",
    "react-dropzone": "^14.2.3",
    "react-ga": "^3.3.1",
    "react-ga4": "^2.1.0",
    "react-helmet": "^6.1.0",
    "react-idle-timer": "^5.6.2",
    "react-markdown": "^8.0.7",
    "react-router-dom": "5.2.0",
    "react-scripts": "5.0.1",
    "react-semantic-toasts": "^0.6.6",
    "react-semantic-ui-datepickers": "^2.17.2",
    "react-tabulator": "^0.18.1",
    "react-trello": "^2.2.11",
    "rrule": "^2.7.2",
    "rsuite": "^5.32.0",
    "semantic-ui-css": "^2.5.0",
    "semantic-ui-react": "^2.1.4",
    "styled-components": "^5.3.9",
    "use-debounce": "^9.0.4",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}
英文:

Trying to build a react application in a docker container. It fails at the end with a HookWebPackError. It will no longer complie no matter what I do. I'm sure if its a webpack issue or its a node version error. It worked yesterday with no code changes but not working today. I'm not sure what CSS Loader is. I assume its a default module.

Failed to compile.
HookWebpackError: Cannot read properties of undefined (reading 'e')
-- inner error --
TypeError: Cannot read properties of undefined (reading 'e')
Generated code for /app/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].oneOf[5].use[1]!/app/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].oneOf[5].use[2]!/app/node_modules/react-data-table-component-extensions/dist/index.css
1 | __webpack_require__.r(__webpack_exports__);
2 | /* harmony import */ var _css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("/app/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].oneOf[4]!/app/node_modules/css-loader/dist/runtime/noSourceMaps.js");
3 | /* harmony import */ var _css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
4 | /* harmony import */ var _css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__("/app/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].oneOf[4]!/app/node_modules/css-loader/dist/runtime/api.js");
5 | /* harmony import */ var _css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
6 | /* harmony import */ var _css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__("/app/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].oneOf[4]!/app/node_modules/css-loader/dist/runtime/getUrl.js");
7 | /* harmony import */ var _css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_2__);
8 | // Imports
9 | 
10 | 
11 | 
12 | var ___CSS_LOADER_URL_IMPORT_0___ = new URL(/* asset import */ __webpack_require__("asset/inline|data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAB80lEQVQ4T73Uv2tTURQH8O85972kxpqWNG2gOKhb21X8hXYQxCEKLp3cXNw6OIm0zTWWVjo4Cv4BIlIEF4c6FEQQi4uLZNTFYvNDiwWN9713jrxKQZOXBNLiXd89H77n3Hcv4YAXHbCH/wuOWh3kKJhSEDvjVbYtbffqKDFhrqRZ1ui+IrrB4PQfRCIieorAv1Vdoq1OcBsYY4jCV6Q0aAxuS9O8TGUQhRJeUGBZoTmQf65+lzaT0DYwvxA+1AiXBsSc+bxMjb+Lxq1mnITrpFKr3Utf7QnGMxNxdQNzvVr2niUVjFh3ioU2WMITW4uHPrbu+SdhYd6dFqK32vSy9RXaSZ6T0uiCawDmZq3srXYFx+aDs0p447N3eNPSj06Dz881a2Bvtl72nnQFh60O++LqBC5Wy/5aEpizvyaN8AcRmWwspitdwfjjWMk9VqUJn73zbSln1IxMuBcMztTK/nTPQ9kF72hBvGADoC/KOtuw/juANE5GggcMvkyq6xnjFz9ZavZMGG/Il3ScxD0C8RVAvqloRGzyAF6TaqBEFwWydoRT11rRrne5MPfzuLB/UgFPJXofz+yY1YEdcc/jpEloX49DK9qopIpYpSjuri8wLtxDAUwHnDr63dLXfYG7hzGjJjuFoT1s/2DCf9N3y51u0W9RndcVBJTNUgAAAABJRU5ErkJggg=="), __webpack_require__.b);
13 | var ___CSS_LOADER_URL_IMPORT_1___ = new URL(/* asset import */ __webpack_require__("asset/inline|data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAACQUlEQVRIS+2Vz2sTURDHZ2bfJgER0e5K8WIEwR+nCuJJISBCD14EwWsK9aYgePHQbF42Aa+CFT0UDZ4Ef9Czp+g/YNCDCApSRDSbtAGR1s3bN7Khm+5mAyaBgoJ7Wmbf+35m5vt2HsIuP7jL+vD3AeyyP+dVMs1xK5+4AtvpNTzXLPwHgFX2TxPjxXgriFQ90KLOBJI0JNokSCx/ldgebt1ID45e52x3v3pFAGVN8CvapEA0Ta1WDVJFBSIfxUnziQDpTKciFsYCHHR6Epi/taqZB+EGu+Sf8qqZN/33bZPzknM/lH+kU8u+D+Mzpd5TNOBeW5qNOCRVgbW0dQyJ7nuueR4AuS+6pFaQ+EvLNWUI2ENi/qf2XyAbT1pV8ThcY5X5ELJa3bchzn28i4OqUwDb8V8S883v1ey7QSaSaUYFKwbxmgaYR9DrwPjMq2YexrO1S/41RLTCRKJ4AmCX/CIgHvdc81bqnG9DiIIiMC4Oi/fXSyZbqwbr4Gq7lvsQhhKAGWerhWg8IobNOGCQUSgA6qwnzdfh91m5mddaFONrGfikBqSOa15OAQ44vSYR3Ihv0BrurLvm3Kg/15K9AioussB6wlgNMvrbky0aMQZCTxSaixsVXBuG2I6/AICznmveTngR0xkDoK4AcBkQniNDMBBC2KsZL5FWF1q13KepAVGvVSAOg7HjGQLoHoi3XYnddGU7A/GPFYw7NceqwHL8zwRJw6YBMEBhpMnhqZhGMDV/mLvRpTTxhTNpAv8+4DdMgQkoILVAwQAAAABJRU5ErkJggg=="), __webpack_require__.b);
14 | var ___CSS_LOADER_URL_IMPORT_2___ = new URL(/* asset import */ __webpack_require__("asset/inline|data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAACUklEQVRIS8XVTWgTQRQH8P+b2d0sDR4qlQqKCFVMsniwgog3BdGLKCilHiroSSgekqytB5Ei4ke7iYoevHkRKlXvggevop6smyjowYJYUOtBo8l+zJMVqU3ZbEOb4t4W5v1/vJnhDWGVP1rlfPxfQJtw90nBh+K6JKY9dZk+gvzmT0m70LKD1Ph0H5E4GTIexgZoYYlYCzyTj2LY+tEKaQ041QMM7PDs7NW4YqPsHpaB3qU4ONsYzfW3D0yxxACFqSWAKNAsVU4o8C+vaD34A/ytXYj962CKZWqmehnEWxVTN8BpUjBZ0Nd2b5pg/kYQb+q1zHmMkYrq5gFzwh2DlB/qhczddgPj1pkl95RisdGzsxebAef1pFSUr41YsysB0jeme8NA3qzbucGOAKZTGWKgp2HnrkeBHQdSTiVPhN56MXduVYDF29nxDpYFrHHe9ijNk6GvujQD6aRDDzzUpC5+isAIv9vbvrTsQC9Vb/ukLqBgzekl95ZkWheG2A0BSpqIrMBS4llI/NkvWmdw5VW3rhuXfDsz3HSLDMc9Jgj9Ssc99lk3JM96gbzv27m9hlM9DuZNTZ0QzXh2dlJ3Kk8NLRz0QlpPOvnwMAQSL71i9lETEP0YE+4AEe2EQgoaP1aKRiNAL7u7BLB2IaCAOb9gPY8AIfgaAjoIgQaDX3i2NT8gE9+DqDgCks5gqTWJgOlUntTt3P4kYKk1iUCq7G6BwmkCb4hDGPQRAncaBetd++N68crx6b40RC0uoAaVxsj298t60VYy8OLfg04lLsr5DVarICjeIYUiAAAAAElFTkSuQmCC"), __webpack_require__.b);
15 | var ___CSS_LOADER_EXPORT___ = _css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
16 | var ___CSS_LOADER_URL_REPLACEMENT_0___ = _css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_2___default()(___CSS_LOADER_URL_IMPORT_0___);
17 | var ___CSS_LOADER_URL_REPLACEMENT_1___ = _css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_2___default()(___CSS_LOADER_URL_IMPORT_1___);
18 | var ___CSS_LOADER_URL_REPLACEMENT_2___ = _css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_2___default()(___CSS_LOADER_URL_IMPORT_2___);
19 | // Module
20 | ___CSS_LOADER_EXPORT___.push([module.id, ".data-table-extensions {\r\n  display: inline-block;\r\n  width: 100%;\r\n  box-sizing: border-box;\r\n  padding: 0.7rem 1.2rem;\r\n}\r\n\r\n.data-table-extensions > .data-table-extensions-filter {\r\n  float: left;\r\n}\r\n\r\n.data-table-extensions > .data-table-extensions-filter > .icon {\r\n  float: left;\r\n  display: block;\r\n  width: 20px;\r\n  height: 24px;\r\n  background-image: url(" + ___CSS_LOADER_URL_REPLACEMENT_0___ + ");\r\n  background-repeat: no-repeat;\r\n  background-position: left center;\r\n}\r\n\r\n.data-table-extensions > .data-table-extensions-filter > .filter-text {\r\n  border: 0;\r\n  border-bottom: 1px solid #f5f5f5;\r\n  outline: none;\r\n  padding: 4px;\r\n  margin-left: 4px;\r\n  background-color: transparent;\r\n}\r\n\r\n.data-table-extensions > .data-table-extensions-filter > .filter-text::-webkit-input-placeholder {\r\n  color: #ccc;\r\n}\r\n\r\n.data-table-extensions > .data-table-extensions-filter > .filter-text::placeholder {\r\n  color: #ccc;\r\n}\r\n\r\n.data-table-extensions > .data-table-extensions-filter > .filter-text:focus,\r\n.data-table-extensions > .data-table-extensions-filter > .filter-text:hover {\r\n  border-bottom-color: #dfdfdf;\r\n}\r\n\r\n.data-table-extensions > .data-table-extensions-action {\r\n  float: right;\r\n  position: relative;\r\n}\r\n\r\n.data-table-extensions > .data-table-extensions-action > button {\r\n  float: right;\r\n  display: block;\r\n  width: 30px;\r\n  height: 30px;\r\n  background-repeat: no-repeat;\r\n  background-position: center center;\r\n  background-color: transparent;\r\n  border: none;\r\n  cursor: pointer;\r\n  padding: 5px;\r\n  border-radius: 0.3rem;\r\n  outline: none;\r\n  margin-right: 0.3rem;\r\n}\r\n\r\n.data-table-extensions > .data-table-extensions-action > button::after {\r\n  display: block;\r\n  white-space: nowrap;\r\n  width: 60px;\r\n  margin-top: 30px;\r\n  margin-left: -20px;\r\n  -webkit-animation: fadeIn 0.4s;\r\n  animation: fadeIn 0.4s;\r\n  text-align: center;\r\n  background: #f5f5f5;\r\n  line-height: 24px;\r\n  border-radius: 5px;\r\n  font-size: 13px;\r\n  color: #157efb;\r\n}\r\n\r\n.data-table-extensions > .data-table-extensions-action > button.drop,\r\n.data-table-extensions > .data-table-extensions-action > button:hover {\r\n  background-color: #f5f5f5;\r\n}\r\n\r\n.data-table-extensions > .data-table-extensions-action > button.download {\r\n  background-image: url(" + ___CSS_LOADER_URL_REPLACEMENT_1___ + ");\r\n}\r\n\r\n.data-table-extensions > .data-table-extensions-action > button.download.drop:hover::after {\r\n  content: none;\r\n}\r\n\r\n.data-table-extensions > .data-table-extensions-action > button.download:hover::after {\r\n  content: 'Export';\r\n}\r\n\r\n.data-table-extensions > .data-table-extensions-action > button.print {\r\n  background-image: url(" + ___CSS_LOADER_URL_REPLACEMENT_2___ + ");\r\n  background-position: center 4px;\r\n}\r\n\r\n.data-table-extensions > .data-table-extensions-action > button.print:hover::after {\r\n  content: 'Print';\r\n}\r\n\r\n.data-table-extensions > .data-table-extensions-action > .dropdown {\r\n  position: absolute;\r\n  top: 100%;\r\n  right: 5px;\r\n  z-index: 1000;\r\n  padding: 0;\r\n  margin: 0.125rem 0 0;\r\n  text-align: right;\r\n  list-style: none;\r\n  background-color: #f5f5f5;\r\n  background-clip: padding-box;\r\n  border: 1px solid #f5f5f5;\r\n  border-radius: 0.25rem;\r\n  line-height: 16px;\r\n  display: none;\r\n}\r\n\r\n.data-table-extensions > .data-table-extensions-action > .dropdown.drop {\r\n  -webkit-animation: fadeIn 0.3s;\r\n  animation: fadeIn 0.3s;\r\n  display: block;\r\n}\r\n\r\n@-webkit-keyframes fadeIn {\r\n  from {\r\n    opacity: 0;\r\n  }\r\n\r\n  to {\r\n    opacity: 1;\r\n  }\r\n}\r\n\r\n@keyframes fadeIn {\r\n  from {\r\n    opacity: 0;\r\n  }\r\n\r\n  to {\r\n    opacity: 1;\r\n  }\r\n}\r\n\r\n.data-table-extensions > .data-table-extensions-action > .dropdown button {\r\n  display: block;\r\n  text-decoration: none;\r\n  white-space: nowrap;\r\n  font-size: 13px;\r\n  color: #157efb;\r\n  padding: 4px 6px;\r\n  background-color: transparent;\r\n  border: none;\r\n  width: 100%;\r\n  cursor: pointer;\r\n  outline: none;\r\n  text-align: left;\r\n}\r\n\r\n.data-table-extensions > .data-table-extensions-action > .dropdown button:hover {\r\n  background-color: #fcfcfc;\r\n}\r\n", ""]);
21 | // Exports
22 | ___CSS_LOADER_EXPORT___.locals = {};
23 | /* harmony default export */ __webpack_exports__.d.e.f.a.u.l.t = (___CSS_LOADER_EXPORT___);
24 |
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
The command '/bin/sh -c yarn build' returned a non-zero code: 1
Service 'frontend' failed to build : Build failed
Error: Process completed with exit code 1.

This is my package.json

{
"name": "ui",
"version": "0.1.0",
"private": true,
"dependencies": {
"@artsy/fresnel": "^6.1.0",
"@azure/msal-browser": "^2.36.0",
"@azure/msal-react": "^1.5.6",
"@emotion/react": "^11.10.6",
"@emotion/styled": "^11.10.6",
"@fullcalendar/core": "^6.1.5",
"@fullcalendar/daygrid": "^6.1.5",
"@fullcalendar/interaction": "^6.1.5",
"@fullcalendar/list": "^6.1.5",
"@fullcalendar/react": "^6.1.5",
"@fullcalendar/rrule": "^6.1.5",
"@fullcalendar/timegrid": "^6.1.5",
"@material-ui/core": "^4.12.4",
"@monaco-editor/react": "^4.5.0",
"@mui/icons-material": "^5.11.16",
"@mui/material": "^5.12.1",
"@okta/okta-auth-js": "^7.2.0",
"@okta/okta-react": "^6.7.0",
"@react-pdf/renderer": "^3.1.9",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"@tinymce/tinymce-react": "^4.3.0",
"axios": "^1.3.6",
"chart.js": "^2.9.4",
"firebase": "^9.20.0",
"google-map-react": "^2.2.0",
"js-file-download": "^0.4.12",
"mui-datatables": "^4.3.0",
"react": "^18.2.0",
"react-beautiful-dnd": "^13.1.1",
"react-chartjs-3": "^2.7.7",
"react-data-table-component-extensions": "^1.6.0",
"react-debounce-input": "^3.3.0",
"react-dom": "^18.2.0",
"react-dropzone": "^14.2.3",
"react-ga": "^3.3.1",
"react-ga4": "^2.1.0",
"react-helmet": "^6.1.0",
"react-idle-timer": "^5.6.2",
"react-markdown": "^8.0.7",
"react-router-dom": "5.2.0",
"react-scripts": "5.0.1",
"react-semantic-toasts": "^0.6.6",
"react-semantic-ui-datepickers": "^2.17.2",
"react-tabulator": "^0.18.1",
"react-trello": "^2.2.11",
"rrule": "^2.7.2",
"rsuite": "^5.32.0",
"semantic-ui-css": "^2.5.0",
"semantic-ui-react": "^2.1.4",
"styled-components": "^5.3.9",
"use-debounce": "^9.0.4",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

答案1

得分: 0

"overrides": {
"webpack": "5.76.0"
}

我将上面的代码添加到了 package.json 中，它对我有所帮助。看起来像是与Webpack相关的问题，但由于使用CRA（Create React App）而不进行eject操作，我无法升级Webpack的版本。因此，我找到了一个临时解决方案，它在rpm中有效。如果使用yarn，需要使用 resolution 指令代替 overrides。

英文: 
 "overrides": {
"webpack": "5.76.0"
},

I added code above into package.json and it helped to me. It seemed like a Webpack-related problem, but I could not upgrade Webpack's version because of CRA without ejecting. So, I found a temporary solution and itt works with rpm . In case of yarn it is necessary to add resolution directive instead of overrides.

huangapple
  • 本文由 发表于 2023年5月18日 04:39:30
  • 转载请务必保留本文链接：https://go.coder-hub.com/76276038.html
  • reactjs
  • webpack
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定