Netlify-cms: Uploadcare widget missing in Gatsby with 4.x plugin

[smashercosmo]

Describe the bug
When I add
media_library: name: uploadcare config: publicKey: my_real_public_key
to my config.yaml and then open /admin page, Uploadcare widget doesn't show up and I see
netlify-cms-app.js:255 Uncaught (in promise) TypeError: Cannot read property 'init' of undefined at netlify-cms-app.js:255
in devtools console. If I remove media_library option, error goes away.

Expected behavior
There shouldn't be an error in console and widget should show up

Applicable Versions:

• Netlify CMS version: 2.9.1
• Git provider: GitHub
• OS: MacOS Sierra 10.12
• Browser: Chrome 74
• Node.JS version: 11.9.0

CMS configuration
````
backend:
name: git-gateway
accept_roles:
- admin
branch: master
repo: name/my_real_repo

public_folder: /img
media_folder: static/img
media_library:
name: uploadcare
config:
publicKey: my_real_public_key

collections:

• name: "blog"
  label: "Blog"
  folder: "content/blog"
  create: true
  slug: "{{year}}-{{month}}-{{day}}-{{slug}}"
  editor:
  preview: false
  fields:
  
  
  
  • label: "Title"
    
    name: "title"
    
    widget: string
  
  
  • label: "Publish Date"
    
    name: "date"
    
    widget: datetime
  
  
  • label: "Description"
    
    name: "description"
    
    widget: string
  
  
  • label: "Body"
    
    name: "body"
    
    widget: markdown
  
  
  • label: "Image"
    
    name: "image"
    
    widget: image
    
    ````
  
  

Additional context
I'm using netlify-cms with Gatsby

[talves]

@smashercosmo Are you using the new 4.0.0 plugin with netlify-cms-app?

If so, you will need to add the Uploadcare widget to the project and then register it. They were left out to make the app library to not carry the large media libraries unless needed.

We should document this in the case someone does not know how to add this to their project.

[smashercosmo]

Alright) Thx for the explanation

[smashercosmo]

@talves Sorry for bothering you again, but could you please describe how am I supposed to do that)
I assume I need to

1. npm i netlify-cms-app netlify-cms-media-library-uploadcare
2. Then add this to Gatsby config

{
      resolve: 'gatsby-plugin-netlify-cms',
      options: {
        modulePath: `${__dirname}/src/cms/cms.js`,
      }
    }

1. And then register Uploadcare widget in cms.js file (I'm not exactly sure how)

[talves]

src/cms/cms.js

import CMS from 'netlify-cms-app'
import uploadcare from 'netlify-cms-media-library-uploadcare';

CMS.registerMediaLibrary(uploadcare);

_Note:_ make sure to remove netlify-cms from the project. Update gatsby-plugin-netlify-cms to v4.x

[smashercosmo]

@talves Alright, it works, thank you

[MilosJo]

Hey guys @talves @smashercosmo @barthc
This thread helped me to add uploadcare widget correctly, I am able to use it when creating new post in netlify/admin. I can add pictures, config is working correctly since I passed it multiple: true.
But when I try to publish new product in my collection I get an error:

GET http://localhost:8000/api/file/src/pages/products/2019-06-21-zoran-manijak.md?ts=1561118671837 500 (Internal Server Error)

TypeError: Cannot read property 'includes' of undefined
    at netlify-cms-app.js:16
    at async j.entryExist (netlify-cms-app.js:16)
    at async j.generateUniqueSlug (netlify-cms-app.js:16)
    at async j.persistEntry (netlify-cms-app.js:16)
    at async Object.onPersist (netlify-cms-app.js:227)

Uncaught (in promise) 
{type: "ENTRY_PERSIST_FAILURE", error: "Failed to persist entry", payload: {…}}
error: "Failed to persist entry"
payload: {collectionName: "products", entrySlug: "", error: "TypeError: Cannot read property 'includes' of undefined"}
type: "ENTRY_PERSIST_FAILURE"

Thanks

[SimeonGriggs]

I hope @talves's reply gets added to the docs at some point!

[erezrokah]

Opened this issue: https://github.com/netlify/netlify-cms/issues/2855