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

Question

我正在尝试将express.js实现到我的react js项目中，但是当我将这两行添加到我的app.js代码中时：

const express = require('express')
const app = express()"

我面临以下错误：

ERROR in ./node_modules/body-parser/lib/read.js 19:11-26
Module not found: Error: Can't resolve 'zlib' in '[myReactProject]\node_modules\body-parser\lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "zlib": require.resolve("browserify-zlib") }'
    - install 'browserify-zlib'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "zlib": false }
ERROR in ./node_modules/body-parser/lib/types/urlencoded.js 201:12-34
Module not found: Error: Can't resolve 'querystring' in '[myReactProject]\node_modules\body-parser\lib\types'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "querystring": require.resolve("querystring-es3") }'
    - install 'querystring-es3'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "querystring": false }
ERROR in ./node_modules/content-disposition/index.js 21:15-39
Module not found: Error: Can't resolve 'path' in '[myReactProject]\node_modules\content-disposition'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
    - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "path": false }
ERROR in ./node_modules/cookie-signature/index.js 5:13-30
Module not found: Error: Can't resolve 'crypto' in '[myReactProject]\node_modules\cookie-signature'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }'
    - install 'crypto-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "crypto": false }
ERROR in ./node_modules/destroy/index.js 15:17-41
Module not found: Error: Can't resolve 'fs' in '[myReactProject]\node_modules\destroy'
ERROR in ./node_modules/destroy/index.js 16:13-30
Module not found: Error: Can't resolve 'stream' in '[myReactProject]\node_modules\destroy'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
    - install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "stream": false }
ERROR in ./node_modules/destroy/index.js 17:11-26
Module not found: Error: Can't resolve 'zlib' in '[myReactProject]\node_modules\destroy'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "zlib": require.resolve("browserify-zlib") }'
    - install 'browserify-zlib'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "zlib": false }
ERROR in ./node_modules/etag/index.js 20:13-30
Module not found: Error: Can't resolve 'crypto' in '[myReactProject]\node_modules\etag'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }'
    - install 'crypto-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "crypto": false }
ERROR in ./node_modules/etag/index.js 21:12-31
Module not found: Error: Can't resolve 'fs' in '[myReactProject]\node_modules\etag'
ERROR in ./node_modules/express/lib/application.js 22:11-26
Module not found: Error: Can't resolve 'http' in '[myReactProject]\node_modules\express\lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "http": require.resolve("stream-http") }'
    - install 'stream-http'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "http": false }
ERROR in ./node_modules/express/lib/application.js 29:14-37
Module not found: Error: Can't resolve 'path' in '[myReactProject]\node_modules\express\lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
    - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "path": false }
ERROR in ./node_modules/express/lib/request.js 17:11-30
Module not found: Error: Can't resolve 'net' in '[myReactProject]\node_modules\express\lib'
ERROR in ./node_modules/express/lib/request.js 19:11-26
Module not found: Error: Can't resolve 'http' in '[myReactProject]\node_modules\express\lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "http": require.resolve("stream-http") }'
    - install 'stream-http'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "http": false }
ERROR in ./node_modules/express/lib/response.js 20:11-26
Module not found: Error: Can't resolve 'http' in '[myReactProject]\node_modules\express\lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "http": require.resolve("stream-http") }'
    - install 'stream-http'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "http": false }
ERROR in ./node_modules/express/lib/response.js 23:11-26
Module not found: Error: Can't resolve 'path' in '[myReactProject]\node_modules\express\lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
    - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "path": false }
ERROR in ./node_modules/express/lib/utils.js 23:18-40
Module not found: Error: Can't resolve 'querystring' in '[myReactProject]\node_modules\express\lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "querystring": require.resolve("querystring-es3") }'
    - install 'querystring-es3'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "querystring": false }
ERROR in ./node_modules/express/lib/view.js 16:11-26
Module not found: Error: Can't resolve 'path' in '[myReactProject]\node_modules\express\lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
    - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "path": false }
ERROR in ./node_modules/express/lib/view.js 17:9-22
Module not found: Error: Can't resolve 'fs' in '[myReactProject]\node_modules\express\lib'
ERROR in ./node_modules/mime-types/index.js 15:14-37
Module not found: Error: Can't resolve 'path' in '[myReactProject]\node_modules\mime-types'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
    - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "path": false }
ERROR in ./node_modules/mime/mime.js 1:11-26
Module not found: Error: Can't resolve 'path' in '[myReactProject]\node_modules\mime'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
    - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "path": false }
ERROR in ./node_modules/mime/mime.js 2:9-22
Module not found: Error: Can't resolve 'fs' in '[myReactProject]\node_modules\mime'
ERROR in ./node_modules/parseurl/index.js 14:10-24
Module not found: Error: Can't resolve 'url' in '[myReactProject]\node_modules\parseurl'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "url": require.resolve("url/") }'
    - install 'url'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "url": false }
ERROR in ./node_modules/send/index.js 22:9-22
Module not found: Error: Can't resolve 'fs' in '[myReactProject]\node_modules\send'
ERROR in ./node_modules/send/index.js 27:11-26
Module not found: Error: Can't resolve 'path' in '[myReactProject]\node_modules\send'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
    - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "path": false }
ERROR in ./node_modules/send/index.js 29:13-30
Module not found: Error: Can't resolve 'stream' in '[myReactProject]\node_modules\send'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
    - install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "stream": false }
ERROR in ./node_modules/send/index.js 30:11-26
Module not found: Error: Can't resolve 'util' in '[myReactProject]\node_modules\send'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "util": require.resolve("util/") }'
    - install 'util'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "util": false }
ERROR in ./node_modules/serve-static/index.js 18:14-37
Module not found: Error: Can't resolve 'path' in '[myReactProject]\node_modules\serve-static'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
    - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "path": false }
ERROR in ./node_modules/serve-static/index.js 20:10-24
Module not found: Error: Can't resolve 'url' in '[myReactProject]\node_modules\serve-static'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "url": require.resolve("url/") }'
    - install 'url'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "url": false }

如何重现此问题：

• 首先通过“create-react-app”命令创建一个新的react项目
• 使用 npm/yarn 安装 Express
• 将“const express = require('express')”和“const app = express()”添加到app.js

我已经尝试过：

• 通过（例如）包含polyfills：resolve.fallback：{“zlib”：false }对于错误中列出的每个依赖项
• 单独安装每个依赖项

Answer 1

你必须将前端与后端分开。也就是说，在您的项目目录中，尝试创建两个不同的文件夹，一个标题为

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/