Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Uploadcare widget missing in Gatsby with 4.x plugin #2318

Closed
smashercosmo opened this issue May 7, 2019 · 8 comments
Closed

Uploadcare widget missing in Gatsby with 4.x plugin #2318

smashercosmo opened this issue May 7, 2019 · 8 comments

Comments

@smashercosmo
Copy link
Contributor

smashercosmo commented May 7, 2019

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
Copy link
Collaborator

talves commented May 7, 2019

@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
Copy link
Contributor Author

Alright) Thx for the explanation

@smashercosmo
Copy link
Contributor Author

@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
Copy link
Collaborator

talves commented May 7, 2019

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
Copy link
Contributor Author

@talves Alright, it works, thank you

@talves talves changed the title Issue with Uploadcare widget Uploadcare widget missing in Gatsby with 4.x plugin May 7, 2019
@MilosJo
Copy link

MilosJo commented Jun 21, 2019

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
Copy link

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

@erezrokah
Copy link
Contributor

Opened this issue: #2855

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants