Like what we’re doing? Star us on GitHub!

Webpack error when updating document in collection with payload.update

Mark | Omniux
4 weeks ago
13

I am trying to to update a field in my collection with the following code;



 await payload.update({
        collection: 'clients',
        id,
        data: {
            status: 'meetingInviteSent'
        },
        depth: 2,
    });


However this gives me the following error in the console;



TypeError: payload__WEBPACK_IMPORTED_MODULE_2__.default.update


The collection doesn't update however the toast still displays saying that the collection updated successfully.



I created this document using the JSON API from my Next.js app;



        var result = await fetch(`${process.env.NEXT_PUBLIC_CMS_URL}/api/clients`, { 
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({
            clientInformation: {
              name: `${firstName} ${lastName}`,
              email,
              company 
            },
            name: `${firstName} ${lastName}`,
            email,
            company,
            lastContacted: new Date(),
            services: services.join(', '),
            message
          })});


This adds the document to Payload. But updating it using the local API fails

  • jesschow
    Payload Team
    4 weeks ago

    @Mark | Omniux do you have update access defined on your clients collection?

  • Mark | Omniux
    4 weeks ago

    Hey @jesschow, I do, yeah, I have it set using a Permissions check, I can try it without. I did use a workaround for the time being and did an update using the useFormFields hook, but it is quite a tenuous solution i'll be honest haha



    I should probably mention I am using a custom UI field with a custom button that calls payload.update

  • jesschow
    Payload Team
    4 weeks ago

    @Mark | Omniux glad you found a workaround 💥 still curious what is causing this, do you get the same typeError if you explicitly set the type? i.e.


    data: {
      status: 'meetingInviteSent' 
    } as any, 
  • Mark | Omniux
    4 weeks ago

    Afraid that's not working either. console logging the 'payload' object is returning an empty object, so the update function doesn't exist. I am possibly misunderstanding how payload.update is meant to function. I am trying to use it inside of a custom React component that is being displayed via a UI field



    I'm doing

    import payload from payload

    and using it like this;



    import payload from 'payload';
    import { useForm, useFormFields } from 'payload/components/forms';
    import { Data } from 'payload/dist/admin/components/forms/Form/types';
    import React, { useEffect, useState } from 'react'
    
    export const ClientInfo = () => {
        const [prevState, setPrevState] = useState<Data | null>(null)
        const { getData, submit } = useForm();
        const { email, name, company, services, id } = getData();
        const [status, setStatus]: [string, (value: string) => void] = useFormFields(([fields, dispatch]) => [
            fields.status.value as string, (value: string) => dispatch({ type: 'UPDATE', path: 'status', value: value })
        ]);
    
        const dropClient = () => {
            setStatus('lost');
        }
    
        const onboardClient = async () => {
            //setStatus('meetingInviteSent');
            await payload.update({
                collection: 'clients',
                id,
                data: {
                    status: 'meetingInviteSent'
                } as any,
                depth: 2,
            });
        }
    
        return (<div> ... <button type='button' onClick={async () => await onboardClient()}>Onboard Client</button> </div>)
    }
  • jmikrut
    Payload Team
    4 weeks ago

    Payload is a Node-only class, and it can't be run in the browser



    you need to make fetches to your API within the admin panel code

  • Mark | Omniux
    4 weeks ago

    gotcha, I was starting to figure that out as I was pasting my code snippets 😄 Would it maybe be possible to fetch this payload instance and hold it in a provider? Not so much for my use case but for future use cases? Having a usePayload hook could be really useful for a situation like this

  • jmikrut
    Payload Team
    4 weeks ago

    nope can't do that, because you can't serialize functions / methods as JSON



    BUT what we could do is "mock" payload as a hook so that it ships all the same methods, similar API, but written for browser instead



    this is something that we have on our radar

  • Mark | Omniux
    4 weeks ago

    Yup totally makes sense. My brain definently stopped working with this one haha. Thanks!

Open the post
Continue the discussion in Discord
Can't find what you're looking for?
Get help straight from the Payload team with an Enterprise License.Learn More