Cloudinary library crashes React app

jbrodz

I'm implementing Cloudinary in my React app, and I'm following the node quick start (https://cloudinary.com/documentation/node_quickstart). I've pasted the code directly from the quick start, and I have my environment variable pasted from my Cloudinary dashboard. When compiling, I'm getting a few dozen errors, all in the cloudinary module due to "module not found" (http, https, url, stream, path, querystring, crypto), and all referencing "polyfill".

Any help would be appreciated. Thanks!

Wissam

Hi there,

If you are encountering “module not found” errors when using Cloudinary in your React app, it could be due to missing polyfills for Node.js core modules. Webpack 5 no longer includes polyfills for these modules by default, so you will need to manually add them to your Webpack configuration.

You can use the node-polyfill-webpack-plugin package to add polyfills for Node.js core modules. After installing the package, add the following to your webpack.config.js file:

const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');

module.exports = {
  // Other rules...
  plugins: [
    new NodePolyfillPlugin()
  ]
}

This should resolve the “module not found” errors you are seeing. If you are still encountering issues, you may want to check out the links below for additional information and solutions:

• Stack Overflow: How to Polyfill node core modules in webpack 5
• Medium: Fixing Node.js Modules Pollyfill Errors in Webpack 5+

Hope you find it helpful.

Thanks,

Wissam

jbrodz

Thanks Wissam for your answer! I had many more errors at compilation when implementing NodePolyfillPlugin - it had a problem with just about all of my app component references. I opted for @MasoodAhmed's solution in the first link you provided, and listed the individualized fallbacks in the webpack.config.js file. This resolved the polyfill errors. However, I've got a new error: "process is undefined", which is coming from line 1 of the cloudinary.js file where I guess it's checking my node version. What file/variable is it looking for here?

Also, if I sidestep the logic looking for "process.versions.node" and explicitly require './lib/cloudinary', I'm getting an error that v2 is not defined: cloudinary__WEBPACK_IMPORTED_MODULE_0__.v2 is undefined.

Wissam

It's great to hear that the polyfill errors have been resolved. The error message "process is undefined" is usually encountered when the `cloudinary.js` file is being run in a browser environment, where the `process` object is not defined. 

To fix this error, you can try adding the following code at the beginning of your cloudinary.js file:

if (typeof process === 'undefined') {
  var process = { env: { NODE_ENV: '' } };
}

This should define the `process` object and prevent the error from occurring. If you are still encountering issues, you may want to check out the links below for additional information and solutions:

If you are still encountering issues with v2 being undefined, it could be due to a missing import statement for the v2 object. Make sure that you have imported the v2 object in your cloudinary.js file using the following code:

const cloudinary = require('cloudinary').v2;

Hope this helps!

Regards, Wissam

jbrodz

Hi Wissam! Thanks again for your response. Your solution resolved the process error - thank you!

I was importing cloudinary with import {v2 as cloudinary} from 'cloudinary'

so I tried with the require syntax that you suggested, but I'm getting the same issue. When I looked around the Cloudinary filetree, I'm seeing that VS Code is alerting me that for pretty much every require statement it could not find a declaration file for the module. When I tried to implement the NodePolyfillPlugin earlier, I got errors with all of my component imports. This might be a gap in my general JavaScript knowledge, but is it possible that the way that I have my app configured is different from how the Cloudinary library is expecting reference strings to be formed?

By the way, VS's "Quick Fix" for some of these alerts is to convert from CommonJS modules to ES modules.

Wissam

It’s great to hear that the process error has been resolved.

I have provided the require statement for Node.JS, for react you will need to use this line

import {Cloudinary} from "@cloudinary/url-gen";

For more details, please follow our React guide:

https://cloudinary.com/documentation/react_integration

Regards, Wissam

jbrodz

Thanks very much for pointing me in the direction of this React implementation. I hadn't noticed that there are separate libraries suggested for React. I installed the libraries and the errors are gone. However, it looks like the upload endpoint is calling a different module (Cloudinary vs cloudinary.v2), and I don't understand how I'm supposed to:

1. Call the upload method
2. Form the URL
3. Handle my credentials (secret key, cloud name, etc.)

I think this might just not be the right tool for me and my project. It seems the technical barrier for entry is too high for something as simple as programmatically uploading an image to a database.

Thank you for all of your help!

epasos

@jbrodz Hi, The Node.js SDK supports either having the v2 signature or without it - see this installation guide for the Node (backend) SDK for more details. Hope this helps.

jbrodz

Hi @epasos, thanks for the additional info. I'm afraid this has not helped.

epasos

@jbrodz Thanks for the clarification. If I well understand your question - for your frontend implementations (e.g., generate URL with or without transformations), you could use the React SDK and the declaration is as described in this documentation.

On the other hand, when performing an upload from the front end of your application, this can be done by directly accessing the Upload Rest API as described in this documentation. And in the case that you would like to perform uploading the asset to your Media Library account from the back end of your application - you could use the Node SDK (i.e., you can use the package either cloudinary or cloudinary.v2) as described in this documentation. Note that for the credentials, you may store the values in an .env file of your application.

Additionally, you may refer to the following project for the different implementations: React sample project, Node documentation, and direct Rest API upload.

Hope this helps.

jbrodz

Hello @epasos, and thanks again for this info. I was able to implement a direct upload with the API endpoint. I was having issues earlier in the week with this setup and so I assumed that it was because I needed the additional libraries installed. But it turned out that I needed to configure the POST request parameters differently, and so it's working now! Luckily, I don't need to transform the images or use any additional tools, so I shouldn't need any of the libraries, but I still could not get them configured without errors.

Thanks again!

Cloudinary Team

Hi @jbrodz,

Thank you for the update. I'm glad Eric could help.

Best regards,
Akshay

Helpful Links For You
💬 Share questions, connect with other users in our Cloudinary Community forums and Discord server!
🧑‍🎓 Join our Cloudinary Academy for free courses, workshops and other educational resources.
📄 Read our documentation for in-depth details on Cloudinary product features and capabilities
📰 Check out the Cloudinary blog for the latest company news and insights