Error when trying to use the cloud storage plugin: Can't resolve "fs"

default discord avatar
hyprsonic.dev
6 months ago
21

When trying to setup a payload project that makes use of s3 I get this unexplainable error, and I'm wondering if there's anyone who has successfully used the official payload cloud storage plugin



To be clear, I want to store media files locally while I'm developing and on s3 when in Production

  • default discord avatar
    Jakey
    6 months ago

    I ran into this recently. there's kind of an odd work-around atm



    setup a folder called "mocks" and put a

    emptyObject.js

    in it with this as its contents :

    export default {}


    then add this to your payload.config.ts under the

    admin

    property



    webpack: (config) => {
                return {
                    ...config,
                    resolve: {
                        ...config.resolve,
                        alias: {
                            ...config.resolve.alias,
                            'fs': mockModulePath,
                        }
                    }
                };
            },


    from what I understand, the issue arises because part of the build process assumes being on the browser, and

    fs

    doesn't exist there. so this alias allows it to get around that

  • default discord avatar
    hyprsonic.dev
    6 months ago

    Alright I'll try this, thanks!



    It works!



    Thank you!



    NOTE FOR THOSE USING PNPM: make sure to

    pnpm i -D process

    to avoid errors

  • default discord avatar
    Sandro Wegmann
    6 months ago

    Hey @Jakey , thanks for helping out! I just ran into the same problem, but I'm not able to fix it unfortunately. What does the mockModulePath refer to? Is it the imported empty object or the path as a string?

  • default discord avatar
    Jakey
    6 months ago

    empty object

  • default discord avatar
    Sandro Wegmann
    6 months ago

    Hmm I get an 'Invalid Configuration Object' Error when I do that. I have no idea about webpack so I'm pretty lost here😅



    Has someone already gone ahead and opened up an issue? That workaround feels weird

  • default discord avatar
    Jakey
    6 months ago

    Agreed, I haven't updated my payload cms lately, so i wonder if it's a new error. I'll post here if it comes up when I do.

  • default discord avatar
    eddieDev
    4 months ago

    Hey @Jakey I've followed all the steps and the build doesn't error out anymore; however, I'm still getting this payload warning:


    [22:53:32] INFO (payload): WARNING in ./src/api/s3/actions/fetchS3Client.ts 21:34-46 export 'readFileSync' (imported as 'readFileSync') was not found in 'fs' (possible exports: default) webpack compiled with 1 warning

    Is this normal?

  • default discord avatar
    Jakey
    4 months ago

    I’ve not seen that warning since applying the details above. Your error does look like what I encountered initially though

  • default discord avatar
    eddieDev
    4 months ago

    Hi Jakey. Hmm i see. I ran some tests and the fs is still able to write, I'm not getting build errors, but the error is bugging me.

  • default discord avatar
    Jakey
    4 months ago

    hm, i wonder if our plugin versions are different



    "@payloadcms/plugin-cloud-storage": "^1.0.15",

  • default discord avatar
    eddieDev
    4 months ago

    im not using the plugin cloud storage

  • default discord avatar
    Jakey
    4 months ago

    oh ok, my bad then. my issues arose from the plugin originally

  • default discord avatar
    eddieDev
    4 months ago

    All good. just figured it out. I had to use require('fs') and the warnings are gone now. So that's good to know!

Open the post
Continue the discussion in Discord
Like what we're doing?
Star us on GitHub!

Star

Connect with the Payload Community on Discord

Discord

online

Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.