Hello, I am encountering a strange issue with me Netlify CMS + Gatsby site; I am unable to upload new images through the admin console.
Creating new posts and modifying existing posts using existing images (from the Kaldi coffee starter) works just fine. So does adding new images using the CMS when running locally in dev mode & pushing.
However, when using the CMS part of the deployed site I (and any other author) gets the message “Failed to persist entry: API_ERROR”. The image is shown in the preview but I am unable to save. The details from the console are:
type: UNPUBLISHED_ENTRY_PERSIST_FAILURE
payload:
collection: "blog"
slug: ""
error: API_ERROR
at new t (https://<app_subdomain>.netlify.app/admin/netlify-cms-app.js:14:155265)
at new i (https://<app_subdomain>.netlify.app/admin/netlify-cms-app.js:14:155631)
at l.handleRequestError (https://<app_subdomain>.netlify.app/admin/netlify-cms-app.js:437:27943)
at l.request (https://<app_subdomain>.netlify.app/admin/netlify-cms-app.js:14:227269)
at async l.uploadBlob (https://<app_subdomain>.netlify.app/admin/netlify-cms-app.js:18:8781)
at async Promise.all (index 0)
at async l.persistFiles (https://<app_subdomain>.netlify.app/admin/netlify-cms-app.js:18:610)
at async t.runWithLock (https://<app_subdomain>.netlify.app/admin/netlify-cms-app.js:109:126886)
at async K.persistEntry (https://<app_subdomain>.netlify.app/admin/netlify-cms-app.js:8:39574)
at async https://<app_subdomain>.netlify.app/admin/netlify-cms-app.js:8:322692
In the network tab I can see a failed request to https://<app_subdomain>.netlify.app/.netlify/git/github/git/blobs with the response code 408
Modifying any other field works just fine. Modifying this image field with an existing image works just fine. Creating a new post with an existing image works just fine.
I am using the ‘editorial_workflow’ but have confirmed the same behavior with the ‘simple’ workflow.
This is the relevant part of my config.yml, happy to post the rest if needed.
backend:
name: git-gateway
branch: main
repo: <org>/<repo>
commit_messages:
create: 'Create {{collection}} “{{slug}}”'
update: 'Update {{collection}} “{{slug}}”'
delete: 'Delete {{collection}} “{{slug}}”'
uploadMedia: '[skip ci] Upload “{{path}}”'
deleteMedia: '[skip ci] Delete “{{path}}”'
# site_url: https://www.netlifycms.org
publish_mode: editorial_workflow
local_backend: true
media_folder: static/img
public_folder: /img
and this is my gatsby-config.js:
const { createProxyMiddleware } = require("http-proxy-middleware")
module.exports = {
flags: {
DEV_SSR: false,
PARALLEL_SOURCING: false,
},
siteMetadata: {
title: '',
description: '',
},
plugins: [
'gatsby-plugin-react-helmet',
{
// keep as first gatsby-source-filesystem plugin for gatsby image support
resolve: 'gatsby-source-filesystem',
options: {
path: `${__dirname}/static/img`,
name: 'uploads',
},
},
{
resolve: 'gatsby-source-filesystem',
options: {
path: `${__dirname}/content`,
name: 'pages',
},
},
{
resolve: 'gatsby-source-filesystem',
options: {
path: `${__dirname}/src/img`,
name: 'images',
},
},
'gatsby-plugin-image',
'gatsby-plugin-sharp',
'gatsby-transformer-sharp',
{
resolve: 'gatsby-transformer-remark',
options: {
plugins: [
{
resolve: 'gatsby-remark-relative-images',
options: {
// staticFolderName: 'static',
name: "uploads",
},
},
{
resolve: 'gatsby-remark-images',
options: {
// It's important to specify the maxWidth (in pixels) of
// the content container as this plugin uses this as the
// base for generating different widths of each image.
maxWidth: 2048,
},
},
{
resolve: "gatsby-remark-copy-linked-files",
options: {
destinationDir: "static",
},
},
],
},
},
{
resolve: 'gatsby-plugin-flexsearch',
options: {
type: 'MarkdownRemark',
fields: [
{
name: 'id',
indexed: false,
resolver: 'id',
store: true,
},
{
name: 'templateKey',
indexed: false,
resolver: 'frontmatter.templateKey',
store: true,
},
{
name: 'slug',
indexed: false,
resolver: 'fields.slug',
store: true,
},
{
name: 'locale',
indexed: false,
resolver: 'fields.locale',
store: true,
},
{
name: 'title',
indexed: true,
resolver: 'frontmatter.title',
attributes: {
encode: 'extra',
tokenize: 'full',
threshold: 1,
resolution: 3,
},
store: true,
},
{
name: 'overview',
indexed: true,
resolver: 'frontmatter.overview',
attributes: {
encode: 'icase',
tokenize: 'forward',
threshold: 2,
depth: 3,
},
store: true,
},
{
name: 'html',
indexed: true,
resolver: 'internal.content',
attributes: {
encode: 'balance',
tokenize: 'strict',
threshold: 0,
resolution: 3,
depth: 3,
},
store: true,
},
],
},
},
'gatsby-plugin-postcss',
{
resolve: "gatsby-plugin-purgecss", // purges all unused/unreferenced css rules
options: {
develop: true, // Activates purging in npm run develop
tailwind: true,
purgeOnly: ["/global.css"], // applies purging only on the tailwind file
},
}, // must be after other CSS plugins
{
resolve: 'gatsby-plugin-netlify-cms',
options: {
modulePath: `${__dirname}/src/cms/cms.js`,
},
},
],
developMiddleware: app => {
app.use(
"/.netlify/functions/",
createProxyMiddleware({
target: "http://localhost:9000",
pathRewrite: {
"/.netlify/functions/": "",
},
})
)
},
}
These are the dependencies from package.json:
"dependencies": {
"@tailwindcss/forms": "^0.4.0",
"autoprefixer": "^10.4.2",
"gatsby": "^3.14.6",
"gatsby-background-image": "^1.5.3",
"gatsby-plugin-flexsearch": "^1.0.3",
"gatsby-plugin-image": "^1.14.2",
"gatsby-plugin-netlify-cms": "^5.14.0",
"gatsby-plugin-postcss": "^4.14.0",
"gatsby-plugin-purgecss": "^5.0.0",
"gatsby-plugin-react-helmet": "^4.14.0",
"gatsby-plugin-sharp": "^3.14.3",
"gatsby-remark-copy-linked-files": "^4.11.0",
"gatsby-remark-images": "^5.11.0",
"gatsby-remark-relative-images": "^2.0.2",
"gatsby-source-filesystem": "^3.14.0",
"gatsby-transformer-remark": "^4.11.0",
"gatsby-transformer-sharp": "^3.14.0",
"lodash": "^4.17.15",
"lodash-webpack-plugin": "^0.11.4",
"luxon": "^2.3.0",
"netlify-cms-app": "^2.15.67",
"postcss": "^8.4.6",
"prop-types": "^15.6.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-helmet": "^6.0.0",
"tailwindcss": "^3.0.22",
"uuid": "^7.0.0"
},
I can’t think of anything specific, but big images could be related to