decaporg / decaporg/gatsby-starter-decap-cms
Can't add cloudinary media library - Images via graphql are null
- 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
Assessment
This issue has not been assessed yet.