decaporg / decaporg/gatsby-starter-decap-cms

Can't add cloudinary media library - Images via graphql are null

Open
#663 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
2k
Forks
951
PR merge metrics
No merged PRs in 30d

Description

# Bug report

**What is the current behavior?**
After configuring cloudinary media library for images, when an image is selected from cloudinary, markdown value becomes an absolute URL and it disappears from graphql queries (or better, image value is `null`).

**If the current behavior is a bug, please provide the steps to reproduce.**
cloned the repo and added cloudinary configuration in Netlify cms `config.yml`.
When building, error is displayed:
`TypeError: Cannot read property 'childImageSharp' of null`

**What is the expected behavior?**
image should be processed by Gatsby

**Other relevant information:**
System info
```
System:
OS: Linux 5.8 Ubuntu 20.04.2 LTS (Focal Fossa)
CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
Shell: 5.0.17 - /bin/bash
Binaries:
Node: 14.15.4 - /usr/local/bin/node
Yarn: 1.22.10 - /usr/local/bin/yarn
npm: 6.14.10 - /usr/local/bin/npm
Browsers:
Chrome: 88.0.4324.150
npmPackages:
gatsby: ^2.32.3 => 2.32.3
gatsby-image: ^2.3.5 => 2.11.0
gatsby-plugin-google-fonts: ^1.0.1 => 1.0.1
gatsby-plugin-manifest: ^2.12.0 => 2.12.0
gatsby-plugin-netlify: ^2.11.0 => 2.11.0
gatsby-plugin-netlify-cms: ^4.9.0 => 4.9.0
gatsby-plugin-react-helmet: ^3.2.5 => 3.10.0
gatsby-plugin-sass: ^2.2.4 => 2.8.0
gatsby-plugin-sharp: ^2.5.7 => 2.14.1
gatsby-remark-copy-linked-files: ^2.2.4 => 2.10.0
gatsby-remark-images: ^3.2.6 => 3.11.0
gatsby-remark-relative-images: ^2.0.2 => 2.0.2
gatsby-source-filesystem: ^2.2.5 => 2.11.0
gatsby-transformer-remark: ^2.7.5 => 2.16.0
gatsby-transformer-sharp: ^2.4.7 => 2.12.0
npmGlobalPackages:
gatsby-cli: 2.19.1
```

config.yml
```
backend:
name: git-gateway
branch: master
commit_messages:
create: 'Create {{collection}} “{{slug}}”'
update: 'Update {{collection}} “{{slug}}”'
delete: 'Delete {{collection}} “{{slug}}”'
uploadMedia: '[skip ci] Upload “{{path}}”'
deleteMedia: '[skip ci] Delete “{{path}}”'

media_folder: static/img
public_folder: /img

media_library:
name: cloudinary
config:
cloud_name: xxx
api_key: xxx

collections:

..don't want to copy all file since it is not relevant..
```

cms.js file:
```
import CMS from 'netlify-cms-app'
import cloudinary from 'netlify-cms-media-library-cloudinary'

// import AboutPagePreview from './preview-templates/AboutPagePreview'
import BlogPostPreview from './preview-templates/BlogPostPreview'
// import ProductPagePreview from './preview-templates/ProductPagePreview'
// import IndexPagePreview from './preview-templates/IndexPagePreview'

CMS.registerMediaLibrary(cloudinary)

// CMS.registerPreviewTemplate('index', IndexPagePreview)
// CMS.registerPreviewTemplate('about', AboutPagePreview)
// CMS.registerPreviewTemplate('products', ProductPagePreview)
CMS.registerPreviewTemplate('blog', BlogPostPreview)

```

image value in markdown file after selecting an image from cloudinary:
`image: https://res.cloudinary.com/xxx/image/upload/v1613039158/lemurs_xysf6i.png`

Error when running `gatsby build`
```
ERROR #95313

Building static HTML failed for path "/about/"

See our docs page for more info on this error: https://gatsby.dev/debug-html

20 | 22 | fluid={about.frontmatter.image.childImageSharp.fluid}
| ^
23 | />
24 |
25 |

WebpackError: TypeError: Cannot read property 'childImageSharp' of null
```

Node.js version: v14.15.4
NPM/Yarn version 6.14.10
Operating System: Ubuntu
Additional tools:

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.