Unknown file extension ".scss"

ingrid741last year

15

  const createResult = createClientBlocks({
    blocks: [
      {
        slug: `${data.id ?? ''}_${user.id}`,
        fields: [],
      }
    ],
    defaultIDType: config.db.defaultIDType,
    i18n: req.i18n,
    importMap: importMap
  })

• 

  tylkomatlast year

  @735059082293149777

  are you using a custom component?

• 

  ingrid741last year

  Yes, I'm using some custom components and some of them import scss. I'm thinking that causes the issue as Node tries to process the importMap, which imports those.

• 

  tylkomatlast year

  @735059082293149777

  do you configure them like this?

  
  

      components: {
        logout: {
          Button: '/src/components/Logout#MyComponent', 
        },
      },

• 

  ingrid741last year

  Yup 🙂

• 

  tylkomatlast year

  What do you do with the importMap?

• 

  ingrid741last year

  As argument to

  createClientBlocks

  . I've inhoused that function now and got rid of that argument, so now it works. Just wondering how payload are able to use it server-side in their code.

• 

  tylkomatlast year

  @735059082293149777

  Did you create a new Payload instance in your createClientBlocks function?

• 

  ingrid741last year

  It doesn't create a new Payload instance, and doesn't seem to use it downstream either:

  https://github.com/payloadcms/payload/blob/e5b28c98dcd5ec89e4f14a7b3e6b99d9920302c0/packages/payload/src/fields/config/client.ts#L168
  
  

  Friendly bump

  
  
  @654031862146007055

  Hey, I'm trying to import and use this function,

  createClientBlocks

  :

  https://github.com/payloadcms/payload/blob/e5b28c98dcd5ec89e4f14a7b3e6b99d9920302c0/packages/payload/src/fields/config/client.ts#L168
  
  

  * If I import it on server, it crashes because of client components coming in through

  importMap

  .

  
  

  * If I import it on client, it crashes because of server components coming in through

  importMap

  getting in the client bundle...

  
  
  

  How are you guys able to import and use stuff that imports importMap - what's the trick here 🙂

  
  
  

  Not sure how to exclude the importMap from client bundle in 3.0

• 

  tylkomatlast year

  Maybe it has to be used in a server component?

• 

  ingrid741last year

  You're right actually, it depends on an argument

  config.db.defaultIDType

  which is easy to get server-side but client-side it needs to be fetched

  
  
  

  It runs client-side if the importMap can ble taken out of the client bundle and the defaultIDType fetched, but yes doesn't seem intended to ran there.

• 

  zed0547last year

  What Payload version are you on?

  
  
  

  And in what context are you trying to run createClientBlocks in?

  
  
  

  The reason it probably doesn't work for you is because this is the construction of the blocks intended to be sent to the client, not the actual representation of them through config

• 

  ingrid741last year

  I'm on payload 3.31.0

  
  
  

  The context is I'm trying to define "ephemeral" blocks (built right after init and alive for the duration of the app session). I pass a list of block configs to it and it returns

  ClientBlock[]

  , which I add to a custom property on the clientConfig (which I am setting using the setter provided in

  useConfig()
  
  

  It works fine, I'm able to create the ephemeral blocks this way if I inhouse

  createClientBlocks()

  and get rid of all references to the importMap

  
  
  

  The issue is when I try to persist them they don't get an id in database. I'm wondering if that's because I'm inhousing and cutting down that function.

  
  
  

  It looks like it's supposed to run server-side, seeing as it depends on

  sanitizedConfig.db.defaultIDType

  as an argument

• 

  zed0547last year

  How are you "persisting" them? Changes to clientBlocks don't really mean anything as they are just a representation of their full config counterparts

  
  
  

  Changing a client field for example, might make it presentationally different, but won't have an impact on the data

• 

  ingrid741last year

  But if I run it server side, it tries to import

  importMap

  which nukes the build as Node tries to import whatever scss files are in my custom components

  
  
  

  I have a collection where I can add documents having a block field serving these ephemeral blocks

  
  
  

  So that's how I'm persisting them

  
  
  

  They're saved fine, just without an id (which is a separate issue - can't for the life of me find where in your code that id is added 😊 I mean the row id of a block field

  
  
  

  Hey

  @654031862146007055

  , when I exclude

  importMap

  from the client bundle the app complains because client needs it in other places. I'll make a new post adressing this.

  
  
  https://discord.com/channels/967097582721572934/1031993785971900556/threads/1369396830055698554
  
  

  Just use it with req:

  
  
  

      const clientBlocks = createClientBlocks({
        blocks,
        defaultIDType: req.payload.db.defaultIDType,
        importMap: req.payload.importMap,
        i18n: req.i18n,
      }) as ClientBlock[]

  
  
  

  Thanks for the input

  @654031862146007055

  &

  @644887357794811916

  😊

• 

  zed0547last year

  Oh nice you figured it out

  
  
  

  My pleasure