#Unknown file extension ".scss"

36 messages · Page 1 of 1 (latest)

karmic tree
#

Getting the above message on build if I try and run this in a beforeChange hook on a collection:

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

Commenting it out resolves the issue. Apparently it's because downstream createClientField accesses the importMap with some components there importing scss files, and Node doesn't handle scss.

createClientBlocks is an utility exported from @subtle snow/payload. Weird thing is it seems to be called in various server contexts there.

Any ideas welcome on how to be able to run it server-side, or move it into client context.

dim quailBOT
#
New Community-Help Thread Created!

Help is on the way! To mark it as solved, use the /solve command. In the meantime, here are some existing threads that may help you:

Documentation:

Community-Help:

karmic tree
#

Friendly bump

marsh condor
#

@karmic tree are you using a custom component?

karmic tree
marsh condor
#

@karmic tree do you configure them like this?

    components: {
      logout: {
        Button: '/src/components/Logout#MyComponent', 
      },
    },
karmic tree
marsh condor
#

What do you do with the importMap?

karmic tree
#

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.

marsh condor
#

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

karmic tree
karmic tree
#

Friendly bump

@fallen drift 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 🙂

karmic tree
#

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

marsh condor
#

Maybe it has to be used in a server component?

karmic tree
#

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.

fallen drift
#

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

karmic tree
#

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

fallen drift
#

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

karmic tree
#

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

karmic tree
#

Hey @fallen drift , 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.

karmic tree
#

Just use it with req:

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

Thanks for the input @fallen drift & @marsh condor 😊

fallen drift
#

Oh nice you figured it out