Can’t resolve ‘fs’ using webpack and react

by

You can’t use any modules that come with the Node Core API in the browser, they just won’t work there. Node Core Modules rely on C/C++ binaries which won’t be present in the browser. So you’ll need to find an equivalent approach to replacing any fs use in your react app.

One approach would be to serve the file you want to work with over HTTP via a Node JS backend to your React app. You could read the file using fs in your Node server, and place that logic within a route, call that route from your React App via HTTP and stream it back. Then you will have the file data within your React App and can work with it as you need.

This GitHub repo has a listing of Node Core Libraries that Webpack has ported over for browser usage. Unfortunately fs isn’t one of them.

More Related Contents:

  1. Check synchronously if file/directory exists in Node.js
  2. React-router with BrowserRouter / browserHistory doesn’t work on refresh
  3. Error message “error:0308010C:digital envelope routines::unsupported”
  4. How to Polyfill node core modules in webpack 5
  5. Angular 6 many Can’t resolve errors (crypto, fs, http, https, net, path, stream, tls, zlib)
  6. Node cannot find module “fs” when using webpack
  7. How to close a readable stream (before end)?
  8. Get file name from absolute path in Nodejs?
  9. Node.js check if file exists
  10. Webpack for back-end?
  11. npx command not found
  12. Module not found: Can’t resolve ‘fs’ in Next.js application
  13. How to make the webpack dev server run on port 80 and on 0.0.0.0 to make it publicly accessible?
  14. Get all files recursively in directories NodejS
  15. How to create full path with node’s fs.mkdirSync?
  16. Webpack 4 “size exceeds the recommended limit (244 KiB)”
  17. How to fix “FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed – JavaScript heap out of memory” error
  18. How to resolve fs.existsSync is not a function
  19. Read file from aws s3 bucket using node fs
  20. Webpack how to build production code and how to use it
  21. Unable to delete data from mongoDB
  22. Local dependency in package.json
  23. How to set environment variables from within package.json?
  24. npm ERR! Error: EPERM: operation not permitted, rename
  25. Error installing bcrypt with npm
  26. Meteor Subscribe doesn’t update sort order of collection
  27. How to setup an authentication middleware in Express.js
  28. Mongoose optional search query parameters?
  29. node-websocket-server: possible to have multiple, separate “broadcasts” for a single node.js process?
  30. Firestore Add value to array field

Leave a Comment