Search code examples
reactjsnetlifycloudinarydotenv

Can't configure env variables to use cloudinary in react app

I'm having problems with cloudinary configurations in my react app. I installed the library and created a cloudinary file like this:

cloudinary.js

import { v2 as cloudinary } from 'cloudinary';
import * as dotenv from 'dotenv';
dotenv.config();

cloudinary.config({
    cloud_name: process.env.CLOUD_NAME,
    api_key: process.env.CLOUD_API_KEY,
    api_secret: process.env.CLOUD_API_SECRET,
    secure: true
});

export default cloudinary;

My .env file:

CLOUD_NAME=d*******c
CLOUD_API_KEY=8***********8
CLOUD_API_SECRET=j*************************A

I'm using netlify to deploy. When I'm trying to use cloudinary in other file with import cloudinary from "..."; I'm getting an error like below: enter image description here

Can someone help? Thanks in advance!

Solution

  • It depends on what you used for setting up the project.

    • If it's CRA then you have to use REACT_APP_ as the prefix, Reference
    • If it's Vite then you have to use import.meta.env.VITE_SOME_KEY with VITE_ as the prefix, Reference