tacit heath
Problem Description
I want to aggregate blocks configs reference because i need to use them more than in one place.
I already imported blocks configs in payload.config, this way i need only the string references.
I'm experiencing an issue where an array of strings is not being recognized when imported from another file into a config file (in my case the collection Pages, the one created in the template), even though the same array works perfectly when written directly.
Code Setup
File 1: src/blocks/index.ts
import { BlockSlug } from 'payload'
export const blockConfigs: BlockSlug[] = ['mapBlock']
File 2: src/collections/Pages/index.ts
import { blockConfigs } from '../../blocks/index'
//...above is ok
fields: [
{
name: 'title',
type: 'text',
required: true,
},
{
type: 'tabs',
tabs: [
{
fields: [
{
name: 'layout',
type: 'blocks',
blockReferences: ['mapBlock'], //THIS WORKS
// blockReferences: blockConfigs, //THIS DOES NOT WORK
// blockReferences: [...blockConfigs], //THIS DOES NOT WORK TOO
blocks: [],
required: true,
admin: {
initCollapsed: true,
},
},
],
label: 'Content',
},
SHARED_META,
],
},
//...rest is ok
What I've Verified
- The array content is correct when logging it in the file it has been imported:
console.log(blockConfigs)outputs['mapBlock']
Expected Behavior
Since blockConfigs is typed as BlockSlug[] and contains ['mapBlock'], TypeScript should recognize it as a valid BlockSlug[] type, just like when I write ['mapBlock'] directly.
Actual Behavior
On admin FE internal server error toast pop out when using the imported blockConfigs and trying to do any action (like deleting a block)
peak birch