javascript 无法在我的React JS项目中使用js.js

k97glaaz  于 2023-11-15  发布在  Java
关注(0)|答案(2)|浏览(163)

我试图在我的react js项目中实现express.js,但当我将这两行代码添加到app.js代码中时:

  1. const express = require('express')
  2. const app = express()"

字符串
我遇到了以下错误:

  1. ERROR in ./node_modules/body-parser/lib/read.js 19:11-26
  2. Module not found: Error: Can't resolve 'zlib' in '[myReactProject]\node_modules\body-parser\lib'
  3. BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
  4. This is no longer the case. Verify if you need this module and configure a polyfill for it.
  5. If you want to include a polyfill, you need to:
  6. - add a fallback 'resolve.fallback: { "zlib": require.resolve("browserify-zlib") }'
  7. - install 'browserify-zlib'
  8. If you don't want to include a polyfill, you can use an empty module like this:
  9. resolve.fallback: { "zlib": false }
  10. ERROR in ./node_modules/body-parser/lib/types/urlencoded.js 201:12-34
  11. Module not found: Error: Can't resolve 'querystring' in '[myReactProject]\node_modules\body-parser\lib\types'
  12. BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
  13. This is no longer the case. Verify if you need this module and configure a polyfill for it.
  14. If you want to include a polyfill, you need to:
  15. - add a fallback 'resolve.fallback: { "querystring": require.resolve("querystring-es3") }'
  16. - install 'querystring-es3'
  17. If you don't want to include a polyfill, you can use an empty module like this:
  18. resolve.fallback: { "querystring": false }
  19. ERROR in ./node_modules/content-disposition/index.js 21:15-39
  20. Module not found: Error: Can't resolve 'path' in '[myReactProject]\node_modules\content-disposition'
  21. BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
  22. This is no longer the case. Verify if you need this module and configure a polyfill for it.
  23. If you want to include a polyfill, you need to:
  24. - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
  25. - install 'path-browserify'
  26. If you don't want to include a polyfill, you can use an empty module like this:
  27. resolve.fallback: { "path": false }
  28. ERROR in ./node_modules/cookie-signature/index.js 5:13-30
  29. Module not found: Error: Can't resolve 'crypto' in '[myReactProject]\node_modules\cookie-signature'
  30. BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
  31. This is no longer the case. Verify if you need this module and configure a polyfill for it.
  32. If you want to include a polyfill, you need to:
  33. - add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }'
  34. - install 'crypto-browserify'
  35. If you don't want to include a polyfill, you can use an empty module like this:
  36. resolve.fallback: { "crypto": false }
  37. ERROR in ./node_modules/destroy/index.js 15:17-41
  38. Module not found: Error: Can't resolve 'fs' in '[myReactProject]\node_modules\destroy'
  39. ERROR in ./node_modules/destroy/index.js 16:13-30
  40. Module not found: Error: Can't resolve 'stream' in '[myReactProject]\node_modules\destroy'
  41. BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
  42. This is no longer the case. Verify if you need this module and configure a polyfill for it.
  43. If you want to include a polyfill, you need to:
  44. - add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
  45. - install 'stream-browserify'
  46. If you don't want to include a polyfill, you can use an empty module like this:
  47. resolve.fallback: { "stream": false }
  48. ERROR in ./node_modules/destroy/index.js 17:11-26
  49. Module not found: Error: Can't resolve 'zlib' in '[myReactProject]\node_modules\destroy'
  50. BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
  51. This is no longer the case. Verify if you need this module and configure a polyfill for it.
  52. If you want to include a polyfill, you need to:
  53. - add a fallback 'resolve.fallback: { "zlib": require.resolve("browserify-zlib") }'
  54. - install 'browserify-zlib'
  55. If you don't want to include a polyfill, you can use an empty module like this:
  56. resolve.fallback: { "zlib": false }
  57. ERROR in ./node_modules/etag/index.js 20:13-30
  58. Module not found: Error: Can't resolve 'crypto' in '[myReactProject]\node_modules\etag'
  59. BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
  60. This is no longer the case. Verify if you need this module and configure a polyfill for it.
  61. If you want to include a polyfill, you need to:
  62. - add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }'
  63. - install 'crypto-browserify'
  64. If you don't want to include a polyfill, you can use an empty module like this:
  65. resolve.fallback: { "crypto": false }
  66. ERROR in ./node_modules/etag/index.js 21:12-31
  67. Module not found: Error: Can't resolve 'fs' in '[myReactProject]\node_modules\etag'
  68. ERROR in ./node_modules/express/lib/application.js 22:11-26
  69. Module not found: Error: Can't resolve 'http' in '[myReactProject]\node_modules\express\lib'
  70. BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
  71. This is no longer the case. Verify if you need this module and configure a polyfill for it.
  72. If you want to include a polyfill, you need to:
  73. - add a fallback 'resolve.fallback: { "http": require.resolve("stream-http") }'
  74. - install 'stream-http'
  75. If you don't want to include a polyfill, you can use an empty module like this:
  76. resolve.fallback: { "http": false }
  77. ERROR in ./node_modules/express/lib/application.js 29:14-37
  78. Module not found: Error: Can't resolve 'path' in '[myReactProject]\node_modules\express\lib'
  79. BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
  80. This is no longer the case. Verify if you need this module and configure a polyfill for it.
  81. If you want to include a polyfill, you need to:
  82. - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
  83. - install 'path-browserify'
  84. If you don't want to include a polyfill, you can use an empty module like this:
  85. resolve.fallback: { "path": false }
  86. ERROR in ./node_modules/express/lib/request.js 17:11-30
  87. Module not found: Error: Can't resolve 'net' in '[myReactProject]\node_modules\express\lib'
  88. ERROR in ./node_modules/express/lib/request.js 19:11-26
  89. Module not found: Error: Can't resolve 'http' in '[myReactProject]\node_modules\express\lib'
  90. BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
  91. This is no longer the case. Verify if you need this module and configure a polyfill for it.
  92. If you want to include a polyfill, you need to:
  93. - add a fallback 'resolve.fallback: { "http": require.resolve("stream-http") }'
  94. - install 'stream-http'
  95. If you don't want to include a polyfill, you can use an empty module like this:
  96. resolve.fallback: { "http": false }
  97. ERROR in ./node_modules/express/lib/response.js 20:11-26
  98. Module not found: Error: Can't resolve 'http' in '[myReactProject]\node_modules\express\lib'
  99. BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
  100. This is no longer the case. Verify if you need this module and configure a polyfill for it.
  101. If you want to include a polyfill, you need to:
  102. - add a fallback 'resolve.fallback: { "http": require.resolve("stream-http") }'
  103. - install 'stream-http'
  104. If you don't want to include a polyfill, you can use an empty module like this:
  105. resolve.fallback: { "http": false }
  106. ERROR in ./node_modules/express/lib/response.js 23:11-26
  107. Module not found: Error: Can't resolve 'path' in '[myReactProject]\node_modules\express\lib'
  108. BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
  109. This is no longer the case. Verify if you need this module and configure a polyfill for it.
  110. If you want to include a polyfill, you need to:
  111. - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
  112. - install 'path-browserify'
  113. If you don't want to include a polyfill, you can use an empty module like this:
  114. resolve.fallback: { "path": false }
  115. ERROR in ./node_modules/express/lib/utils.js 23:18-40
  116. Module not found: Error: Can't resolve 'querystring' in '[myReactProject]\node_modules\express\lib'
  117. BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
  118. This is no longer the case. Verify if you need this module and configure a polyfill for it.
  119. If you want to include a polyfill, you need to:
  120. - add a fallback 'resolve.fallback: { "querystring": require.resolve("querystring-es3") }'
  121. - install 'querystring-es3'
  122. If you don't want to include a polyfill, you can use an empty module like this:
  123. resolve.fallback: { "querystring": false }
  124. ERROR in ./node_modules/express/lib/view.js 16:11-26
  125. Module not found: Error: Can't resolve 'path' in '[myReactProject]\node_modules\express\lib'
  126. BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
  127. This is no longer the case. Verify if you need this module and configure a polyfill for it.
  128. If you want to include a polyfill, you need to:
  129. - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
  130. - install 'path-browserify'
  131. If you don't want to include a polyfill, you can use an empty module like this:
  132. resolve.fallback: { "path": false }
  133. ERROR in ./node_modules/express/lib/view.js 17:9-22
  134. Module not found: Error: Can't resolve 'fs' in '[myReactProject]\node_modules\express\lib'
  135. ERROR in ./node_modules/mime-types/index.js 15:14-37
  136. Module not found: Error: Can't resolve 'path' in '[myReactProject]\node_modules\mime-types'
  137. BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
  138. This is no longer the case. Verify if you need this module and configure a polyfill for it.
  139. If you want to include a polyfill, you need to:
  140. - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
  141. - install 'path-browserify'
  142. If you don't want to include a polyfill, you can use an empty module like this:
  143. resolve.fallback: { "path": false }
  144. ERROR in ./node_modules/mime/mime.js 1:11-26
  145. Module not found: Error: Can't resolve 'path' in '[myReactProject]\node_modules\mime'
  146. BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
  147. This is no longer the case. Verify if you need this module and configure a polyfill for it.
  148. If you want to include a polyfill, you need to:
  149. - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
  150. - install 'path-browserify'
  151. If you don't want to include a polyfill, you can use an empty module like this:
  152. resolve.fallback: { "path": false }
  153. ERROR in ./node_modules/mime/mime.js 2:9-22
  154. Module not found: Error: Can't resolve 'fs' in '[myReactProject]\node_modules\mime'
  155. ERROR in ./node_modules/parseurl/index.js 14:10-24
  156. Module not found: Error: Can't resolve 'url' in '[myReactProject]\node_modules\parseurl'
  157. BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
  158. This is no longer the case. Verify if you need this module and configure a polyfill for it.
  159. If you want to include a polyfill, you need to:
  160. - add a fallback 'resolve.fallback: { "url": require.resolve("url/") }'
  161. - install 'url'
  162. If you don't want to include a polyfill, you can use an empty module like this:
  163. resolve.fallback: { "url": false }
  164. ERROR in ./node_modules/send/index.js 22:9-22
  165. Module not found: Error: Can't resolve 'fs' in '[myReactProject]\node_modules\send'
  166. ERROR in ./node_modules/send/index.js 27:11-26
  167. Module not found: Error: Can't resolve 'path' in '[myReactProject]\node_modules\send'
  168. BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
  169. This is no longer the case. Verify if you need this module and configure a polyfill for it.
  170. If you want to include a polyfill, you need to:
  171. - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
  172. - install 'path-browserify'
  173. If you don't want to include a polyfill, you can use an empty module like this:
  174. resolve.fallback: { "path": false }
  175. ERROR in ./node_modules/send/index.js 29:13-30
  176. Module not found: Error: Can't resolve 'stream' in '[myReactProject]\node_modules\send'
  177. BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
  178. This is no longer the case. Verify if you need this module and configure a polyfill for it.
  179. If you want to include a polyfill, you need to:
  180. - add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
  181. - install 'stream-browserify'
  182. If you don't want to include a polyfill, you can use an empty module like this:
  183. resolve.fallback: { "stream": false }
  184. ERROR in ./node_modules/send/index.js 30:11-26
  185. Module not found: Error: Can't resolve 'util' in '[myReactProject]\node_modules\send'
  186. BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
  187. This is no longer the case. Verify if you need this module and configure a polyfill for it.
  188. If you want to include a polyfill, you need to:
  189. - add a fallback 'resolve.fallback: { "util": require.resolve("util/") }'
  190. - install 'util'
  191. If you don't want to include a polyfill, you can use an empty module like this:
  192. resolve.fallback: { "util": false }
  193. ERROR in ./node_modules/serve-static/index.js 18:14-37
  194. Module not found: Error: Can't resolve 'path' in '[myReactProject]\node_modules\serve-static'
  195. BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
  196. This is no longer the case. Verify if you need this module and configure a polyfill for it.
  197. If you want to include a polyfill, you need to:
  198. - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
  199. - install 'path-browserify'
  200. If you don't want to include a polyfill, you can use an empty module like this:
  201. resolve.fallback: { "path": false }
  202. ERROR in ./node_modules/serve-static/index.js 20:10-24
  203. Module not found: Error: Can't resolve 'url' in '[myReactProject]\node_modules\serve-static'
  204. BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
  205. This is no longer the case. Verify if you need this module and configure a polyfill for it.
  206. If you want to include a polyfill, you need to:
  207. - add a fallback 'resolve.fallback: { "url": require.resolve("url/") }'
  208. - install 'url'
  209. If you don't want to include a polyfill, you can use an empty module like this:
  210. resolve.fallback: { "url": false }

如何重新创建此问题:

  • 首先通过“react-app”命令创建一个新的react项目
  • 使用npm/yarn安装express
  • 在app.js中添加“const express = require('express')”和“const app = express()”
    我已经试过了:
  • included polyfills via(例如):resolve.fallback:{“zlib”:false }针对错误中列出的每个依赖项
  • 单独安装每个依赖项
xn1cxnb4

xn1cxnb41#

你必须将前端和后端分开,也就是说,在你的项目目录中,尝试创建两个不同的文件夹,一个名为Frontend,另一个名为Backend
然后,在后端文件夹中创建一个index.js文件,并在那里安装express
通过这种方式,您可以导入express并在后端内部使用它,并在不同的服务器端口上运行它。

帮助链接!

https://www.freecodecamp.org/news/create-a-react-frontend-a-node-express-backend-and-connect-them-together-c5798926047c/
https://rapidapi.com/blog/create-react-app-express/

zbdgwd5y

zbdgwd5y2#

你必须有2个不同的文件夹为前端和备份,你必须有2个不同的端口。一个为前端和一个为后端。
React不用于服务器端。
例如:
frontend-app.js listening on port localhost://3000 backend-app.js listening on port localhost://3000

相关问题