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

Question

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:

start by creating a new react project via the "create-react-app" command
install express using npm/yarn
add "const express = require('express')" and "const app = express()" to app.js

What I've already tried:

included polyfills via (for Example): resolve.fallback: { "zlib": false } for every dependency listed in the error
installing every dependency seperatly

You are trying to use server side package, in front end package. express is a package that uses NODEJS ONLY packages. So of course it does not work for you. — Tal Rofe
– Tal Rofe, Commented Nov 12, 2023 at 12:17

Mohammed Alkebsi · Accepted Answer · 2023-11-12 12:29:18Z

1

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/

answered Nov 12, 2023 at 12:29

Mohammed Alkebsi

9594 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

porex · Accepted Answer · 2023-11-12 14:26:05Z

0

You must have 2 different folders for Frontend and Backed and you must have 2 different ports. one for Frontend and one for Backend.

React isn't used on the server side.

example :

frontend -app.js listening on port localhost://3000 backend -app.js listening on port localhost://3000

answered Nov 12, 2023 at 14:26

porex

712 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Links That May Help!

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Links That May Help!

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related