[SOLVED] Cloudinary variables not working in .env file

Cloudinary variables not working in .env file

I have a NextJs application using a express backend api. I'm trying to upload user avatars to a folder in cloudinary. I have the cloudinar.js file with the cloudinary.config file that I call from the userController. If I enter the cloud_name, api_key, and api_secret directly in the cloudinary.config file, it works with no trouble, but if I move the variables to a .env file, and call them with process.env.CLOUD_NAME I get the following error saying I must supply cloud_name:

Error: Must supply api_key
[0]     at ensureOption (C:\Users\judo2\Documents\dev\my-sites\the_mat_house\mat_scout_nextjs\node_modules\cloudinary\lib\utils\ensureOption.js:19:13)
[0]     at Object.sign_request (C:\Users\judo2\Documents\dev\my-sites\the_mat_house\mat_scout_nextjs\node_modules\cloudinary\lib\utils\index.js:1164:16)
[0]     at Object.process_request_params (C:\Users\judo2\Documents\dev\my-sites\the_mat_house\mat_scout_nextjs\node_modules\cloudinary\lib\utils\index.js:1214:22)
[0]     at call_api (C:\Users\judo2\Documents\dev\my-sites\the_mat_house\mat_scout_nextjs\node_modules\cloudinary\lib\uploader.js:474:18)
[0]     at Object.upload (C:\Users\judo2\Documents\dev\my-sites\the_mat_house\mat_scout_nextjs\node_modules\cloudinary\lib\uploader.js:53:10)
[0]     at Object.upload (C:\Users\judo2\Documents\dev\my-sites\the_mat_house\mat_scout_nextjs\node_modules\cloudinary\lib\utils\index.js:1411:21)
[0]     at file:///C:/Users/judo2/Documents/dev/my-sites/the_mat_house/mat_scout_nextjs/server/controllers/userController.js:262:46
[0]     at file:///C:/Users/judo2/Documents/dev/my-sites/the_mat_house/mat_scout_nextjs/server/middleware/asyncHandler.js:2:19
[0]     at Layer.handle [as handle_request] (C:\Users\judo2\Documents\dev\my-sites\the_mat_house\mat_scout_nextjs\node_modules\express\lib\router\layer.js:95:5)
[0]     at next (C:\Users\judo2\Documents\dev\my-sites\the_mat_house\mat_scout_nextjs\node_modules\express\lib\router\route.js:149:13)
[0] Error: Must supply api_key
[0]     at ensureOption (C:\Users\judo2\Documents\dev\my-sites\the_mat_house\mat_scout_nextjs\node_modules\cloudinary\lib\utils\ensureOption.js:19:13)
[0]     at Object.sign_request (C:\Users\judo2\Documents\dev\my-sites\the_mat_house\mat_scout_nextjs\node_modules\cloudinary\lib\utils\index.js:1164:16)
[0]     at Object.process_request_params (C:\Users\judo2\Documents\dev\my-sites\the_mat_house\mat_scout_nextjs\node_modules\cloudinary\lib\utils\index.js:1214:22)
[0]     at call_api (C:\Users\judo2\Documents\dev\my-sites\the_mat_house\mat_scout_nextjs\node_modules\cloudinary\lib\uploader.js:474:18)
[0]     at Object.upload (C:\Users\judo2\Documents\dev\my-sites\the_mat_house\mat_scout_nextjs\node_modules\cloudinary\lib\uploader.js:53:10)
[0]     at Object.upload (C:\Users\judo2\Documents\dev\my-sites\the_mat_house\mat_scout_nextjs\node_modules\cloudinary\lib\utils\index.js:1411:21)
[0]     at file:///C:/Users/judo2/Documents/dev/my-sites/the_mat_house/mat_scout_nextjs/server/controllers/userController.js:262:46
[0]     at file:///C:/Users/judo2/Documents/dev/my-sites/the_mat_house/mat_scout_nextjs/server/middleware/asyncHandler.js:2:19
[0]     at Layer.handle [as handle_request] (C:\Users\judo2\Documents\dev\my-sites\the_mat_house\mat_scout_nextjs\node_modules\express\lib\router\layer.js:95:5)
[0]     at next (C:\Users\judo2\Documents\dev\my-sites\the_mat_house\mat_scout_nextjs\node_modules\express\lib\router\route.js:149:13)

I tried String(process.env.CLOUD_NAME) and I get the error that cloud_name is disabled, but again, if I enter the cloud name directly into the config object, it works.

My .enf file works because It is getting the MONGO_URI from the .env file

I am initializing dotenv in the server.js file: import dotenv from "dotenv";

dotenv.config();

Here is the cloudinar.js file:

import { v2 as cloudinary } from "cloudinary";

// Configuration
cloudinary.config({
  cloud_name: process.env.CLOUD_NAME,
  api_key: process.env.CLOUD_KEY,
  api_secret: process.env.CLOUD_SECRET, // Click 'View API Keys' above to copy your API secret
});

export default cloudinary;

And here is the part of the userController where I call cloudinary:

const result = await cloudinary.uploader.upload(image, {
      folder: "products",
      // width: 300,
      // crop: "scale"
    });

Solution

Looks like this is an issue of scope, so you should be able to resolve it by importing and configuring dotenv within cloudinar.js