Errors when using MERN stack

Jayzxr 0
Viewed 39

my goal is to use Mongo DB with React-JS frontend. I've created the UI and the database, my error is coming when I try connecting frontend with MongoDB. Here's the code:

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

  app.use(express.json())

  mongoose.connect('xyz',{
    useNewUrlParser: true,
  })

  app.listen(3001, ()=>{
    console.log('Server is running on port xyz')
  })

But I'm getting errors is TERMINAL:

Failed to compile.

Module not found: Error: Can't resolve 'zlib' in 'C:\Users\jahanzeb\Documents\A Websites\Reactjs\financierft\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 } WARNING in ./node_modules/express/lib/view.js 74:13-25 Critical dependency: the request of a dependency is an expression

WARNING in ./node_modules/on-finished/index.js 196:11-33 Module not found: Error: Can't resolve 'async_hooks' in 'C:\Users\jahanzeb\Documents\A Websites\Reactjs\financierft\node_modules\on-finished'

WARNING in ./node_modules/raw-body/index.js 284:11-33 Module not found: Error: Can't resolve 'async_hooks' in 'C:\Users\jahanzeb\Documents\A Websites\Reactjs\financierft\node_modules\raw-body'

ERROR in ./node_modules/body-parser/lib/read.js 24:11-26 Module not found: Error: Can't resolve 'zlib' in 'C:\Users\jahanzeb\Documents\A Websites\Reactjs\financierft\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/content-disposition/index.js 19:15-39 Module not found: Error: Can't resolve 'path' in 'C:\Users\jahanzeb\Documents\A Websites\Reactjs\financierft\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 4:13-30 Module not found: Error: Can't resolve 'crypto' in 'C:\Users\jahanzeb\Documents\A Websites\Reactjs\financierft\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 'C:\Users\jahanzeb\Documents\A Websites\Reactjs\financierft\node_modules\destroy'

ERROR in ./node_modules/destroy/index.js 17:13-30 Module not found: Error: Can't resolve 'stream' in 'C:\Users\jahanzeb\Documents\A Websites\Reactjs\financierft\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 19:11-26 Module not found: Error: Can't resolve 'zlib' in 'C:\Users\jahanzeb\Documents\A Websites\Reactjs\financierft\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 18:13-30 Module not found: Error: Can't resolve 'crypto' in 'C:\Users\jahanzeb\Documents\A Websites\Reactjs\financierft\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 20:12-31 Module not found: Error: Can't resolve 'fs' in 'C:\Users\jahanzeb\Documents\A Websites\Reactjs\financierft\node_modules\etag'

ERROR in ./node_modules/express/lib/application.js 28:11-26 Module not found: Error: Can't resolve 'http' in 'C:\Users\jahanzeb\Documents\A Websites\Reactjs\financierft\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 42:14-37 Module not found: Error: Can't resolve 'path' in 'C:\Users\jahanzeb\Documents\A Websites\Reactjs\financierft\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 18:11-30 Module not found: Error: Can't resolve 'net' in 'C:\Users\jahanzeb\Documents\A Websites\Reactjs\financierft\node_modules\express\lib'

ERROR in ./node_modules/express/lib/request.js 22:11-26 Module not found: Error: Can't resolve 'http' in 'C:\Users\jahanzeb\Documents\A Websites\Reactjs\financierft\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 25:11-26 Module not found: Error: Can't resolve 'http' in 'C:\Users\jahanzeb\Documents\A Websites\Reactjs\financierft\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 31:11-26 Module not found: Error: Can't resolve 'path' in 'C:\Users\jahanzeb\Documents\A Websites\Reactjs\financierft\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 16:11-26 Module not found: Error: Can't resolve 'path' in 'C:\Users\jahanzeb\Documents\A Websites\Reactjs\financierft\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 18:9-22 Module not found: Error: Can't resolve 'fs' in 'C:\Users\jahanzeb\Documents\A Websites\Reactjs\financierft\node_modules\express\lib'

ERROR in ./node_modules/mime-types/index.js 15:14-37 Module not found: Error: Can't resolve 'path' in 'C:\Users\jahanzeb\Documents\A Websites\Reactjs\financierft\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 'C:\Users\jahanzeb\Documents\A Websites\Reactjs\financierft\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 3:9-22 Module not found: Error: Can't resolve 'fs' in 'C:\Users\jahanzeb\Documents\A Websites\Reactjs\financierft\node_modules\mime'

ERROR in ./node_modules/send/index.js 29:9-22 Module not found: Error: Can't resolve 'fs' in 'C:\Users\jahanzeb\Documents\A Websites\Reactjs\financierft\node_modules\send'

ERROR in ./node_modules/send/index.js 39:11-26 Module not found: Error: Can't resolve 'path' in 'C:\Users\jahanzeb\Documents\A Websites\Reactjs\financierft\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 43:13-30 Module not found: Error: Can't resolve 'stream' in 'C:\Users\jahanzeb\Documents\A Websites\Reactjs\financierft\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/serve-static/index.js 20:14-37 Module not found: Error: Can't resolve 'path' in 'C:\Users\jahanzeb\Documents\A Websites\Reactjs\financierft\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 }

webpack compiled with 23 errors and 3 warnings

First I thought errors have something to do with EXPRESS and MONGOOSE, but in package.json file I do have:

"express": "^4.18.1", "mongoose": "^6.6.1",

So I think it's VS-Code where errors are coming from. Does anyone has any clue/idea of how to fix this issue.

mern reactjs mongoose express mongodb
1 Answers

React uses webpack to bundle your package for use on the browser when using the react-scripts. This means that any code that is imported into your react app should be compatible with your browser (express and mongoose are not).

Node has apis that are not available on the browser and the browser has apis that are not available in node. In your error you see that it is saying that webpack no longer will polyfill node apis for you, meaning that it won’t implement node apis for you that are not available on the browser (such as fs, path, child_process, etc). When these packages are used, the modules that use them are not compatible with the browser.

The issue is that these packages should not be used within a browser app such as react. Keep mongoose and express on the server side, and make sure to not import them into your react app.

tim1170
Related