Deploy fails with Cloudinary when using SVG images

I’m using Strapi with Heroku Postgres and Gridsome. I’ve added my Cloudinary variables to Heroku’s Config Vars, pushed changes, also pushed my files to Github. Everything is working fine on that end.

I’ve added my same Cloudinary variables to my Netlify Environment Variables deployment settings as well.

I deployed with clearing cache, and I’m getting this error below. It seems it can’t find the image paths which should be directed at cloudinary as my Strapi API shows me. I check my GraphQL schema just to be sure. My schema is in check, showing all cloudinary URLs at the same nodes.

My Strapi config/plugins.js file is in the root so it should be available to Netlify.

// Strapi ./config/plugins.js

module.exports = ({ env }) => ({
  upload: {
    provider: 'cloudinary',
    providerOptions: {
      cloud_name: env('CLOUDINARY_NAME'),
      api_key: env('CLOUDINARY_KEY'),
      api_secret: env('CLOUDINARY_SECRET'),
    },
  },
});

How do I fix this the deploy issue?

11:27:21 AM: Build ready to start
11:27:23 AM: build-image version: b0258b965567defc4a2d7e2f2dec2e00c8f73ad6
11:27:23 AM: build-image tag: v3.4.1
11:27:23 AM: buildbot version: fcbc7a79f7372e5995cf02954ef19fc48d20c871
11:27:23 AM: Building without cache
11:27:23 AM: Starting to prepare the repo for build
11:27:23 AM: No cached dependencies found. Cloning fresh repo
11:27:23 AM: git clone https://github.com/djmtype/strapi-gridsome-portfolio
11:27:24 AM: Preparing Git Reference refs/heads/master
11:27:26 AM: Different build dir detected, going to use the one specified in the Netlify configuration file: 'frontend' versus '/frontend' in the Netlify UI
11:27:26 AM: Different publish path detected, going to use the one specified in the Netlify configuration file: 'frontend/dist' versus 'dist' in the Netlify UI
11:27:26 AM: Starting build script
11:27:26 AM: Installing dependencies
11:27:26 AM: Python version set to 2.7
11:27:27 AM: v12.18.0 is already installed.
11:27:28 AM: Now using node v12.18.0 (npm v6.14.4)
11:27:28 AM: Started restoring cached build plugins
11:27:28 AM: Finished restoring cached build plugins
11:27:28 AM: Attempting ruby version 2.7.1, read from environment
11:27:29 AM: Using ruby version 2.7.1
11:27:30 AM: Using PHP version 5.6
11:27:30 AM: 5.2 is already installed.
11:27:30 AM: Using Swift version 5.2
11:27:30 AM: Started restoring cached node modules
11:27:30 AM: Finished restoring cached node modules
11:27:30 AM: Started restoring cached yarn cache
11:27:30 AM: Finished restoring cached yarn cache
11:27:30 AM: Installing yarn at version 1.22.4
11:27:30 AM: Installing Yarn!
11:27:30 AM: > Downloading tarball...
11:27:30 AM: [1/2]: https://yarnpkg.com/downloads/1.22.4/yarn-v1.22.4.tar.gz --> /tmp/yarn.tar.gz.eV0m3Mu8Lh
11:27:30 AM:   % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
11:27:30 AM:                                  Dload  Upload   Total   Spent    Left  Speed
11:27:30 AM:   0     0    0     0    0     0      0      0 --:--:-- --:--:-- --:--:--     0
11:27:30 AM:   0     0    0     0    0     0      0      0 --:--:-- --:--:-- --:--:--     0
11:27:30 AM: 100    80  100    80    0     0    238      0 --:--:-- --:--:-- --:--:--   238
11:27:30 AM: 100    93  100    93    0     0    129      0 --:--:-- --:--:-- --:--:--   129
11:27:31 AM: 100   643  100   643    0     0    619      0  0:00:01  0:00:01 --:--:--   619
11:27:31 AM:   0     0    0     0    0     0      0      0 --:--:--  0:00:01 --:--:--     0
11:27:31 AM: 100 1215k  100 1215k    0     0   833k      0  0:00:01  0:00:01 --:--:-- 3367k
11:27:31 AM: [2/2]: https://yarnpkg.com/downloads/1.22.4/yarn-v1.22.4.tar.gz.asc --> /tmp/yarn.tar.gz.eV0m3Mu8Lh.asc
11:27:31 AM: 100    84  100    84    0     0   3038      0 --:--:-- --:--:-- --:--:--  3038
11:27:31 AM: 100    97  100    97    0     0   1758      0 --:--:-- --:--:-- --:--:--  1758
11:27:31 AM: 100   647  100   647    0     0   7259      0 --:--:-- --:--:-- --:--:--  7259
11:27:31 AM: 100  1028  100  1028    0     0   7913      0 --:--:-- --:--:-- --:--:--  7913
11:27:31 AM: > Verifying integrity...
11:27:31 AM: gpg: Signature made Mon 09 Mar 2020 03:52:13 PM UTC using RSA key ID 69475BAA
11:27:31 AM: gpg: Good signature from "Yarn Packaging <yarn@dan.cx>"
11:27:31 AM: gpg: WARNING: This key is not certified with a trusted signature!
11:27:31 AM: gpg:          There is no indication that the signature belongs to the owner.
11:27:31 AM: Primary key fingerprint: 72EC F46A 56B4 AD39 C907  BBB7 1646 B01B 86E5 0310
11:27:31 AM:      Subkey fingerprint: 6D98 490C 6F1A CDDD 448E  4595 4F77 6793 6947 5BAA
11:27:31 AM: > GPG signature looks good
11:27:31 AM: > Extracting to ~/.yarn...
11:27:31 AM: > Adding to $PATH...
11:27:32 AM: > Successfully installed Yarn 1.22.4! Please open another terminal where the `yarn` command will now be available.
11:27:32 AM: Installing NPM modules using Yarn version 1.22.4
11:27:33 AM: yarn install v1.22.4
11:27:33 AM: [1/4] Resolving packages...
11:27:33 AM: [2/4] Fetching packages...
11:27:36 AM: warning mini-css-extract-plugin@0.5.0: Invalid bin field for "mini-css-extract-plugin".
11:27:37 AM: warning url-loader@1.1.2: Invalid bin field for "url-loader".
11:27:50 AM: info fsevents@1.2.13: The platform "linux" is incompatible with this module.
11:27:50 AM: info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
11:27:50 AM: info fsevents@2.1.3: The platform "linux" is incompatible with this module.
11:27:50 AM: info "fsevents@2.1.3" is an optional dependency and failed compatibility check. Excluding it from installation.
11:27:50 AM: [3/4] Linking dependencies...
11:27:50 AM: warning "@gridsome/source-graphql > apollo-link-http@1.5.17" has unmet peer dependency "graphql@^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0".
11:27:50 AM: warning "@gridsome/source-graphql > graphql-tools@4.0.8" has unmet peer dependency "graphql@^0.13.0 || ^14.0.0 || ^15.0.0".
11:27:50 AM: warning "@gridsome/source-graphql > apollo-link-context > apollo-link@1.2.14" has unmet peer dependency "graphql@^0.11.3 || ^0.12.3 || ^0.13.0 || ^14.0.0 || ^15.0.0".
11:27:50 AM: warning "@gridsome/source-graphql > apollo-link-http > apollo-link-http-common@0.2.16" has unmet peer dependency "graphql@^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0".
11:27:50 AM: warning "@gridsome/source-graphql > graphql-tools > apollo-utilities@1.3.4" has unmet peer dependency "graphql@^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0".
11:27:57 AM: [4/4] Building fresh packages...
11:28:00 AM: Done in 27.45s.
11:28:00 AM: NPM modules installed using Yarn
11:28:00 AM: Started restoring cached go cache
11:28:00 AM: Finished restoring cached go cache
11:28:00 AM: go version go1.14.4 linux/amd64
11:28:00 AM: go version go1.14.4 linux/amd64
11:28:00 AM: Installing missing commands
11:28:00 AM: Verify run directory
11:28:02 AM: ​
11:28:02 AM: ┌─────────────────────────────┐
11:28:02 AM: │        Netlify Build        │
11:28:02 AM: └─────────────────────────────┘
11:28:02 AM: ​
11:28:02 AM: ❯ Version
11:28:02 AM:   @netlify/build 3.3.0
11:28:02 AM: ​
11:28:02 AM: ❯ Flags
11:28:02 AM:   deployId: 5f4fb9d90703792a2468825f
11:28:02 AM:   mode: buildbot
11:28:02 AM: ​
11:28:02 AM: ❯ Current directory
11:28:02 AM:   /opt/build/repo/frontend
11:28:02 AM: ​
11:28:02 AM: ❯ Config file
11:28:02 AM:   No config file was defined: using default values.
11:28:02 AM: ​
11:28:02 AM: ❯ Context
11:28:02 AM:   production
11:28:02 AM: ​
11:28:02 AM: ┌───────────────────────────────────┐
11:28:02 AM: │ 1. Build command from Netlify app │
11:28:02 AM: └───────────────────────────────────┘
11:28:02 AM: ​
11:28:02 AM: $ yarn build
11:28:02 AM: yarn run v1.22.4
11:28:02 AM: $ gridsome build
11:28:02 AM: Gridsome v0.7.19
11:28:03 AM: Initializing plugins...
11:28:03 AM: Load sources - 0s
11:28:04 AM: Create GraphQL schema - 0.87s
11:28:05 AM: Create pages and templates - 0.57s
11:28:05 AM: Generate temporary code - 0.03s
11:28:05 AM: Bootstrap finish - 2.52s
11:28:05 AM: Compiling assets...
11:28:29 AM: Compile assets - 23.76s
11:28:33 AM: Execute GraphQL (7 queries) - 4.33s
11:28:33 AM: Could not generate HTML for "/project/pepperoni-pizza/":
11:28:33 AM: TypeError: Cannot read property 'url' of null
11:28:33 AM:     at a.render (src/templates/Project.vue?6674:1:405)
11:28:33 AM:     at a.t._render (/opt/build/repo/frontend/node_modules/vue/dist/vue.runtime.common.prod.js:6:35273)
11:28:33 AM:     at /opt/build/repo/frontend/node_modules/vue-server-renderer/build.prod.js:1:70603
11:28:33 AM:     at Yi (/opt/build/repo/frontend/node_modules/vue-server-renderer/build.prod.js:1:67167)
11:28:33 AM:     at io (/opt/build/repo/frontend/node_modules/vue-server-renderer/build.prod.js:1:70579)
11:28:33 AM:     at ro (/opt/build/repo/frontend/node_modules/vue-server-renderer/build.prod.js:1:70210)
11:28:33 AM:     at eo (/opt/build/repo/frontend/node_modules/vue-server-renderer/build.prod.js:1:67457)
11:28:33 AM:     at /opt/build/repo/frontend/node_modules/vue-server-renderer/build.prod.js:1:70677
11:28:33 AM:     at Yi (/opt/build/repo/frontend/node_modules/vue-server-renderer/build.prod.js:1:67167)
11:28:33 AM:     at io (/opt/build/repo/frontend/node_modules/vue-server-renderer/build.prod.js:1:70579)
11:28:34 AM: error Command failed with exit code 1.
11:28:34 AM: info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
11:28:34 AM: ​
11:28:34 AM: ┌─────────────────────────────┐
11:28:34 AM: │   "build.command" failed    │
11:28:34 AM: └─────────────────────────────┘
11:28:34 AM: ​
11:28:34 AM:   Error message
11:28:34 AM:   Command failed with exit code 1: yarn build
11:28:34 AM: ​
11:28:34 AM:   Error location
11:28:34 AM:   In Build command from Netlify app:
11:28:34 AM:   yarn build
11:28:34 AM: ​
11:28:34 AM:   Resolved config
11:28:34 AM:   build:
11:28:34 AM:     base: /opt/build/repo/frontend
11:28:34 AM:     command: yarn build
11:28:34 AM:     commandOrigin: ui
11:28:34 AM:     environment:
11:28:34 AM:       - CLOUDINARY_KEY
11:28:34 AM:       - CLOUDINARY_NAME
11:28:34 AM:       - CLOUDINARY_SECRET
11:28:34 AM:       - GRIDSOME_STRAPI_URL
11:28:34 AM:     publish: /opt/build/repo/frontend/dist
11:28:34 AM: Caching artifacts
11:28:34 AM: Started saving node modules
11:28:34 AM: Finished saving node modules
11:28:34 AM: Started saving build plugins
11:28:34 AM: Finished saving build plugins
11:28:34 AM: Started saving yarn cache
11:28:34 AM: Finished saving yarn cache
11:28:34 AM: Started saving pip cache
11:28:34 AM: Finished saving pip cache
11:28:34 AM: Started saving emacs cask dependencies
11:28:34 AM: Finished saving emacs cask dependencies
11:28:34 AM: Started saving maven dependencies
11:28:34 AM: Finished saving maven dependencies
11:28:34 AM: Started saving boot dependencies
11:28:34 AM: Finished saving boot dependencies
11:28:34 AM: Started saving go dependencies
11:28:34 AM: Finished saving go dependencies
11:28:37 AM: Error running command: Build script returned non-zero exit code: 1
11:28:37 AM: Failing build: Failed to build site
11:28:37 AM: Failed during stage 'building site': Build script returned non-zero exit code: 1
11:28:37 AM: Finished processing build request in 1m13.630708452s

So, my problem had nothing to do with Cloudinary. Strapi doesn’t like SVGs or permits you to add them, probably for security reasons.

oh wow - that’s a good catch. Thanks for keeping us posted, i would not have thought of that.

Or it could be a Cloudinary thing, I’m not sure. Cloudinary allows you to sanitize SVGs by adding the option via transformation. However, after I uploaded my SVGs through Strapi using the Cloudinary API, I noticed the image was broken and the extension had been stripped when I examined my Cloudinary media library. BTW, my SVGs had proper headers, so I’m unsure what happened.

When I uploaded the same SVG directly to my Cloudinary media library, everything was intact and recognizable.

I’ll investigate it more when I have time.

2 Likes

Late to the show but I’ve experience similar behaviour with Cloudinary and SVGs

If I add the integration through Netlify UI and leave setup as standard, Cloudinary will automatically optimise all my images but it will break any SVGs I’ve inserted using <img> tags.

Did you get similar behaviour and did you find a way around it?

Hey @LushawnDev,

The post is very old, so the chances of @djmtype returning to share their solution seem very little. I think a better option is to contact Cloudinary support for help with this.

I’m always here. But I haven’t looked at this issue since I ran into it a few years ago. I’m sure Netlify, Cloudinary, and Strapi have most likely evolved since then too. So, I’m pretty far removed from this topic currently. Although, since Directus now has a Cloudinary adapter, I might try it soon.