Unable to save specific block in array of blocks

[richardvanbergen]

Update

It's actually the API not being aware of newly created blocks until the server restarts.

Just restarted the development server. Seems that blocks in the API don't get restarted the same way the API UI does. After closing down the server and starting up again entirely it now works as expected.

Don't know if you still want to consider this a bug but it was confusing from a developer experience perspective because everything else restarts smoothly. 😎

---

Bug Report

Certain blocks are failing to update their content via the admin. Initially, I thought it was down to a definition I created but after copying the QuoteBlock example from here I find they are also not updating.

I will try to experiment later and find some more information but I'm hoping you might have some insight in the mean time.

Expected Behavior

My blocks should save the content I added to them.

Current Behavior

Data returned from the API does not include new values added via the block. Also attached is the request/response that's made to the API.

const ClientListBlock: Block = {
  slug: 'clientList',
  labels: {
    singular: 'Client Listing',
    plural: 'Client Listings'
  },
  fields: [
    {
      type: 'text',
      name: 'test',
      label: 'Test'
    }
  ]
}

export default ClientListBlock

const QuoteBlock: Block = {
  slug: 'Quote', // required
  imageURL: 'https://google.com/path/to/image.jpg',
  imageAltText: 'A nice thumbnail image to show what this block looks like',
  labels: {
    singular: 'Test',
    plural: 'Tests'
  },
  fields: [ // required
    {
      name: 'text',
      label: 'Quote Text',
      type: 'text',
      localized: true,
      required: true,
    },
    {
      name: 'text',
      label: 'Quotee',
      type: 'text',
      localized: true,
    },
  ]
};

Steps to Reproduce

1. Create page builder schema with the definition bellow
2. (possibly related but maybe not) add localisation as defined below
3. Add either of the attached block schemas
4. Try to create a new block

Detailed Description

Request Screenshots:

Request stack trace:

put @ http://localhost:3000/admin/main.js:25097
(anonymous) @ http://localhost:3000/adminvendors-node_modules_payload_dist_admin_components_forms_Error_index_js-node_modules_payload_-6c3d35.js:834
(anonymous) @ http://localhost:3000/adminvendors-node_modules_payload_dist_admin_components_forms_Error_index_js-node_modules_payload_-6c3d35.js:819
callCallback @ http://localhost:3000/admin/main.js:43269
invokeGuardedCallbackDev @ http://localhost:3000/admin/main.js:43318
invokeGuardedCallback @ http://localhost:3000/admin/main.js:43380
invokeGuardedCallbackAndCatchFirstError @ http://localhost:3000/admin/main.js:43394
executeDispatch @ http://localhost:3000/admin/main.js:47567
processDispatchQueueItemsInOrder @ http://localhost:3000/admin/main.js:47599
processDispatchQueue @ http://localhost:3000/admin/main.js:47612
dispatchEventsForPlugins @ http://localhost:3000/admin/main.js:47623
(anonymous) @ http://localhost:3000/admin/main.js:47832
batchedEventUpdates$1 @ http://localhost:3000/admin/main.js:61715
batchedEventUpdates @ http://localhost:3000/admin/main.js:43069
dispatchEventForPluginEventSystem @ http://localhost:3000/admin/main.js:47831
attemptToDispatchEvent @ http://localhost:3000/admin/main.js:45329
dispatchEvent @ http://localhost:3000/admin/main.js:45248
unstable_runWithPriority @ http://localhost:3000/admin/main.js:80927
runWithPriority$1 @ http://localhost:3000/admin/main.js:50600
discreteUpdates$1 @ http://localhost:3000/admin/main.js:61732
discreteUpdates @ http://localhost:3000/admin/main.js:43080
dispatchDiscreteEvent @ http://localhost:3000/admin/main.js:45213

[DanRibbens]

I'm not sure why you would not have an updated API running.

From create-payload-app, the package.json has a script for PAYLOAD_CONFIG_PATH=src/payload.config.ts nodemon
If you're using yarn dev or npm run dev to run the project, nodemon should see file changes and restart node automatically. Payload should start up and alwayrs have your latest changes.

Do you see in your console, after saving a file that it says [nodemon] restarting due to changes...? That should indicate the API is good to go with those updates.

Are you having to stop and start node each time you make changes? How are you running your project?

[richardvanbergen]

That's probably it. I'm not seeing any messages from nodemon on file change only messages from webpack.

I don't think I've changed anything from the defaults. This might be related to a couple of other frustrations I'm having.

❯ yarn dev
yarn run v1.22.4
$ cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts nodemon
[nodemon] 2.0.7
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: ts
[nodemon] starting `ts-node src/server.ts`
[03:26:44] INFO (payload): Starting Payload...
[03:26:45] INFO (payload): Payload Admin URL: http://localhost:3000/admin
[03:26:45] INFO (payload): Connected to Mongo server successfully!
[03:26:47] INFO (payload): E-mail configured with mock configuration
[03:26:47] INFO (payload): Log into mock email provider at https://ethereal.email
[03:26:47] INFO (payload): Mock email account username: nfh67kplnl6jo2nj@ethereal.email
[03:26:47] INFO (payload): Mock email account password: k26t4NzzNTXCw4ureZ
webpack built f146d48c3cec33fdb48f in 9971ms
webpack building...
webpack built 47e2c8af6d843195c44f in 1206ms

[DanRibbens]

Yeah, that definitly is the issue. Each save you should see:

webpack building...
[nodemon] restarting due to changes...
[nodemon] starting `ts-node src/server.ts`
[14:51:03] INFO (payload): Starting Payload...
[14:51:04] INFO (payload): Payload Admin URL: http://localhost:3000/admin
[14:51:05] INFO (payload): Connected to Mongo server successfully!
[14:51:05] INFO (payload): E-mail configured with mock configuration
[14:51:05] INFO (payload): Log into mock email provider at https://ethereal.email
[14:51:05] INFO (payload): Mock email account username: tqqibem3jruzcavc@ethereal.email
[14:51:05] INFO (payload): Mock email account password: RCgFydxecDnfTbcRFw
webpack built 80cff2faf5e3bdd7bfd4 in 9546ms

You're only getting webpack updates and not nodemon and Payload.

I landed on this thread with a few suggestions about nodemon. Might be worth checking out?
remy/nodemon#1630 (comment)

If you're running on windows, make sure system32 folder is in the path variables.

Do you have another project that you can test nodemon on your system, seperate from Payload to isolate the issue?

[jmikrut]

@richardvanbergen what is the filename of your config and / or block config filename? Are you using a .js extension, or a .ts extension? Our create-payload-app nodemon config only watches for ts file changes, so if your files have a JS extension, they will not be picked up on.

We can update this within create-payload-app, and you can also update your local config to support it as well by changing your nodemon.json file to watch extensions ts AND js.

Let us know!

[richardvanbergen]

Hey guys really sorry but I've looked into it and it's down to the fact that some of the files in a yarn workspace and nodemon wasn't aware of them.

Changing the dev command to cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts nodemon --watch ../components fixed the issue.

[DanRibbens]

No problem, @richardvanbergen! Thanks so much for sharing the solution!