Having trouble with require()

JavaScript
1

Hello. I am currently working on a website project that allows a user to upload an image, view the image’s metadata, and remove EXIF data from it.

Most of the packages I search for to accomplish this in npm, use the require() function. I attempt to remove EXIF data from an image using the packages example but I get an error that says the following:

Uncaught ReferenceError: require is not defined

I do some research and discover that this has a similar function to import, but when I attempt to find out how I can use require() in my project, I get a lot of instructions that do not make a lot of sense to me.

I attempt to look into Browserify and Webpack but they talk about bundling modules with their dependencies, it talks about this as if I am the one writing the code that needs to be executed with require(), and not from downloading a package that uses it.

I am not sure what to do with that information, and I think I am at the point where I need personal help with how I should go about this.

Here is the package I am trying to use: https://www.npmjs.com/package/exif-be-gone

Here is the github that hosts my project: https://github.com/Sprigazalea/Image-Analyzer

The React component that holds the code I am trying to get working can be found at src/RemoveEXIF.jsx

Thank you in advance for any advice!

2

require is older way to import modules in node. If your project is already using the import syntax, try importing that module in a similar way as you’d try importing something.

If you want more details on this, look for the difference between require and import, or CommonJS and ES modules. Or see:

3

The package relies on the fs file system node module, and that can’t work in a client side react app. It needs node.js at runtime.

You either need a client side lib or you need to have it run server side (might work with React server components or SSR in something like Next.js).

4

I attempted to import 'exif-be-gone' and it didn’t give me the results I was expecting. I tried taking specific functions from the same package but it didn’t really work either.

5

I see. I am not familiar with running things on the back-end. Do you think it would be a task thats trivial for someone who hasn’t learned anything about it yet? If not, should I just attempt to learn Node.js and work from there? Thanks for responding.

6

Learning a meta framework isn’t trivial, and the server side adds to the complexity. But is a good idea to know a little about it no matter what. It is how a lot of people do full stack these days (as opposed to a traditional full stack, stack, like MERN or whatever).

Learning Node is also valuable, but it won’t help you run Node code in a client side app, that can’t be done. A standard React SPA runs in the browser, not on a server (it is statically served from a web server, but the runtime is the browser).

I would suggest you start by looking for a client side lib. If you can’t find one, and they all use server runtimes, you have to have a server. You could create a microservice that is just a single endpoint your SPA client talks to and sends and receives the images to/from. That way it is minimal code and your main app doesn’t have to change from an SPA to a full stack app. There might also be free online third party services you could rely on, but I don’t know of any for removing EXIF metadata.

1 Like