javascriptreactjsexpresspolyfills

Can't use Express.js in my React JS Project


I'm trying to implement express.js into my react js Project, but when I add those two lines to my app.js code:

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

I am facing the following error:

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 }

How to recreate this Problem:

What I've already tried:


Solution

  • You have to separate the frontend form the backend. That is, in your project directory, try to create two different folders, one titled Frontend and the other titled Backend.

    Then, create an index.js file inside the backend folder and install express there!

    This way, you can import the express and use it inside the backend and run it on a different server port.

    Links That May Help!

    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/