Uncaught (in promise) Unknown cloud_name

jrfii commented 3 years ago

Forgive me if this is not the proper place to address this issue. But considering that "cloud_name" is never once mentioned (out 53 mentions total) in my app within a promise, I figured that the problem just might be on your side. The problem arose after deploying my app to Heroku and using their add-on. The homepage of my app loads, then upon signing-in "Uncaught (in promise) Unknown cloud_name" is logged in the console and nothing renders on the screen. Heroku logs don't show any issues as the sign-in data is retrieved at MongoDB successfully. I'm trying to deploy to a select few users by tomorrow and am scrambling to get this fixed! Thank you for your time.

Bug report for Cloudinary Svelte SDK

Before proceeding, please update to latest version and test if the issue persists I'm using 0.0.1-alpha.1

Describe the bug in a sentence or two.

"Uncaught (in promise) Unknown cloud_name" is being logged in the console but "cloud_name" is never called in a promise. Worked in dev, not working in production (Heroku).

Issue Type (Can be multiple)

[ ] Build - Can’t install or import the SDK [ ] Babel - Babel errors or cross browser issues [ ] UI/Performance - Display or performance issues [ ] Behaviour - Functions aren’t working as expected (Such as generate URL) [ ] Documentation - Inconsistency between the docs and behaviour [X] Other (Specify)

Steps to reproduce

MESN stack deploy to Heroku using Cloudinary add-on.

Error screenshots

Uncaught (in promise) Unknown cloud_name

Browsers (if issue relates to UI, else ignore)

[X] Chrome [ ] Firefox [ ] Safari [ ] Other (Specify) [ ] All

Versions and Libraries (fill in the version numbers)

Svelte Cloudinary SDK - 0.0.0 Svelte - 3.0.0 Babel - 0.0.0 Webpack - 4.30.0 Node - 12.16.1 NPM - 6.13.4

Config Files (Please paste the following files if possible)

package.json { "name": "svelte-app", "version": "1.0.0", "devDependencies": { "cross-env": "^5.2.0", "css-loader": "^2.1.1", "csv-loader": "^3.0.3", "dotenv-webpack": "^6.0.0", "mini-css-extract-plugin": "^0.6.0", "serve": "^11.0.0", "style-loader": "^0.23.1", "svelte-loader": "2.13.3", "webpack": "^4.30.0", "webpack-cli": "^3.3.0", "webpack-dev-server": "^3.3.1" }, "scripts": { "build": "cross-env NODE_ENV=production webpack", "dev": "webpack-dev-server --content-base public" }, "dependencies": { "svelte": "^3.0.0", "@cloudinary/svelte": "0.0.1-alpha.1", "@beyonk/svelte-mapbox": "^5.2.2", "axios": "^0.19.2", "highcharts": "^8.2.2", "mapbox-gl": "^1.12.0", "papaparse": "^5.2.0", "svelte-spa-router": "^2.2.0" } } babel.config.js webpack.config.js const MiniCssExtractPlugin = require('mini-css-extract-plugin') const webpack = require('webpack') const path = require('path') const Dotenv = require('dotenv-webpack')

const mode = process.env.NODE_ENV || 'development' const prod = mode === 'production'

module.exports = { entry: { bundle: ['./src/main.js'], }, resolve: { alias: { svelte: path.resolve('node_modules', 'svelte'), }, extensions: ['.mjs', '.js', '.svelte'], mainFields: ['svelte', 'browser', 'module', 'main'], }, output: { path: __dirname + '/public', filename: '[name].js', chunkFilename: '[name].[id].js', }, devServer: { proxy: { '/api': { target: 'http://localhost:3000', }, }, }, module: { rules: [ { test: /.svelte$/, use: { loader: 'svelte-loader', options: { emitCss: true, hotReload: true, }, }, }, { test: /.css$/, use: [ /**

MiniCssExtractPlugin doesn't support HMR.
For developing, use 'style-loader' instead.
*/ prod ? MiniCssExtractPlugin.loader : 'style-loader', 'css-loader', ], }, { test: /.csv$/, loader: 'csv-loader', options: { dynamicTyping: true, header: true, skipEmptyLines: true, }, }, ], }, mode, plugins: [ new MiniCssExtractPlugin({ filename: '[name].css', }), new Dotenv(), ], devtool: prod ? false : 'source-map', }

Repository

If possible, please provide a link to a reproducible repository that showcases the problem

ghost commented 3 years ago

Hi @jrfii Sounds like a cloud_name isn't being passed to cloudinary-core's url function, used by cloudinary-svelte. I would check if there is a scenario where the cloud_name is null or undefined. Can you please provide the code that causes this?

jrfii commented 3 years ago

Hello, maoznir! Thank you for your timely response. Where should the cloud_name be passed to cloudinary-core's url function? Currently, the config vars are being pulled directly from Heroku. I have a .env folder with the config value provided, but this is bypassed when using Heroku's config vars. To the best of my knowledge, there are no instances of null or defined (everything was functioning properly throughout development). I'm at a complete loss when trying to debug this issue, I have not been able to determine what particular code is causing it.

jrfii commented 3 years ago

Here's my cloudinary.js file: cloudinary.config({ cloud_name: process.env.CLOUD_NAME, api_key: process.env.API_KEY, api_secret: process.env.API_SECRET });

const storage = cloudinaryStorage({ cloudinary: cloudinary, folder: "demo", allowedFormats: ["jpg", "png"], transformation: [{ width: 500, height: 500, crop: "limit" }] });

const parser = multer({ storage: storage });

jrfii commented 3 years ago

On the client side, it is referenced as so: Image cloud_name={process.env.CLOUD_NAME} public_id={$profile.profileImg} alt="Profile img" class="is-pulled-right" transformation="{[ { width: 150, height: 150, gravity: 'face', radius: 'max', crop: 'thumb', background: 'rgb:00D1B2' } ]}" (Had to remove opening "<" and closing "/>" to get content to show in comment.)

patrick-tolosa commented 3 years ago

Hey @jrfii - as @maoznir mentioned, this sounds like cloud_name isn't passed correctly.

Can you verify the value of process.env.CLOUD_NAME? If this code works well in development but not in production, it might be related to a misconfigured environment.

jrfii commented 3 years ago

Hello, Patrick! Thank you also for your timely response. Are you asking me to provide you the cloud_name or just if it I entered the value correctly? If the latter, the value was directly copied and pasted, so there were no errors in transcription. I'll try to tinker with things as you gentlemen suggest and get back to you. Should it be a misconfigured env, do you have any suggestions for how I would go about debugging the issue?

ghost commented 3 years ago

@jrfii please check if the CLOUD_NAME environment variable is defined and available in the production environment in the heroku server

jrfii commented 3 years ago

maoznir, yes, it is. Initially, I was using a different cloud_name, but when I included the Cloudinary add-on it created a new Cloudinary account with different configuration variable values, so I replaced the outdated values with the updated ones. Under both scenarios, the same message was logged in the console.

In the event that it helps to clarify things, here is the link to my Heroku app:

https://patriphy.herokuapp.com/

And here is how I had framed the question on Stack Overflow:

https://stackoverflow.com/questions/65434803/re-herokus-cloudinary-add-on-uncaught-in-promise-unknown-cloud-name

I cannot provide user credentials so that you could test things out because the data being stored is genetic data and of a private nature. Please forgive me if I'm a bit lost in this process, my degrees are in the social sciences! :)

jrfii commented 3 years ago

Also, I have NPM_CONFIG_PRODUCTION set to false. And, my package-lock.json is in my .gitignore file. Might either of these things be related to this issue?

jrfii commented 3 years ago

Do you think that there's a chance that if I proceed with deploying to my personalized domain that this issue might somehow resolve itself?

ghost commented 3 years ago

@jrfii I was sure you were using the cloudinary-svelte sdk, are you actually using the cloudinary addon for heroku instead?

jrfii commented 3 years ago

@maoznir, yes, I am using @cloudinary/svelte and have also added the Heroku add-on. Does one negate the other? Could this be the solution to my problem? I'm about 14 hours in and am ready for some rest. I will have to look more deeply at these things when my mind is fresh. Any thoughts on a possible solution that you might have would be extremely welcomed.

roeeba commented 3 years ago

@jrfii Apologies for the delayed reply. One should not negate the other. The error suggests that a request to Cloudinary was made with no cloud name or that the cloud name does not match one or both of the API keys associated with the account (Key and Secret). Can you please make sure these values are sent correctly?

cloudinary / cloudinary-svelte