React App Compile Errors After Installing Express and Cors

Question

I am working on a React app that focuses on getting an mp3 file from a server but I am getting a CORS error. While trying to follow a tip to enable CORS I started off by installing express and cors via npm ('npm install express' and 'npm install cors'). However I am now getting 30 compile errors. Here is one such error message:

ERROR in ./node_modules/body-parser/lib/read.js 24:11-26

Module not found: Error: Can't resolve 'zlib' in '/home/brian/Projects/music-player/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 }

How do I solve this issue and what are these webpacks and polyfills? Thanks in advance for helping.

Answer 1

Unfortunately, that's not a lot of information on how your app is set up. I guess you are trying to install express (to set up your server) inside your frontend app. If that is the case I would suggest you uninstall it from react app and install it in another directory.

However if the issue still persists this is what works for me. On my side, there was an issue with npm cache.

• try to clean your npm cache: npm cache clean --force

If that does not work:

• delete your node modules
• delete package-lock.json file
• use npm install to get the updated node modules and new package-lock.json file

---

Polyfill is used to implement features on old browsers that do not support a specific feature (for example array.includes() is not supported by Internet Explorer 11)

Webpacks is a module bundler. Its purpose is to compile JavaScript modules and it basically takes your project dependencies (package.json) and generates a dependency graph.

Now regarding the CORS issue. Do you own the server you are trying to retrieve mp3 data? Then you should allow cross origin from that server, setting appropriate headers in the server response: Access-Control-Allow-Origin: *

If you do not own, or you do not have access to the server, you can set up your own server to handle api calls and retrieve data from another server without any CORS issue. You can do it with Express and then request the resource via your server, and send the response back to your frontend.

Just note that you cannot fix the CORS issue directly from the frontend!