Cannot resolve 'fs'

plainnn

4 months ago

Hi, having an issue when trying to access 'fs' after setting up cloud-storage... not sure what to do?

ERROR in ./node_modules/@payloadcms/plugin-cloud-storage/dist/adapters/s3/handleUpload.js 43:27-40
Module not found: Error: Can't resolve 'fs' in '/Users/removed/Documents/projects/removed/node_modules/@payloadcms/plugin-cloud-storage/dist/adapters/s3'

Have tried a few next.config options after a quick google, but nothing seems to be fixing it

exo3718
4 months ago
fs
is a node-only package, you need to configure webpack to alias the module for the dashboard deployment. Check the webpack docu for more info
https://payloadcms.com/docs/admin/webpack

plainnn

4 months ago

Thanks, i've worked out the issue in the code but not 100% sure what needs to be done in the config, are you able to point me to an example of an alias for

fs

please?

I've tried adding

browserify-fs

like so...

  admin: {
    webpack: config => ({
      ...config,
      resolve: {
        ...config.resolve,
        alias: {
          ...config.resolve.alias,
          fs: require.resolve('browserify-fs'),
        },
      },
    }),
  },

exo3718

4 months ago

Sure, you create an empty module, call it

mockModule.ts

or something, that simply has an empty default export like

export default () => {}

Then in your payload config you extend the

admin.webpack

config like this

admin: {
 // ... other admin configs
  webpack(config) {
    const emptyModulePath = path.resolve(__dirname, '<path to your mockModule.ts>');

    return {
       ...config, 
       resolve: {
         ...config.resolve,
          alias: {
            ...config.resolve.alias,
            fs: emptyModulePath, 
          }
       }
    }
  }
}

plainnn

4 months ago

Thank you! 🥳

Any idea why i'm getting this error?

[09:42:35] ERROR (payload): There were 8 errors validating your Payload config
[09:42:35] ERROR (payload): 1: "custom" is not allowed
[09:42:35] ERROR (payload): 2: Collection "media" > "custom" is not allowed
[09:42:35] ERROR (payload): 8: Collection "users" > "custom" is not allowed

I've never modified the

users

collection

exo3718
4 months ago
sure 🙂

mhmmm hard to tell, what do those collections look like?
plainnn
4 months ago
It's doing it to all of my collections for some reason...
paulpopus
4 months ago
Are you on the latest payload version?

plainnn

4 months ago

import { CollectionConfig } from "payload/types";

const Media: CollectionConfig = {
  slug: "media",
  access: {
    read: (): boolean => true,
  },
  upload: {
    adminThumbnail: "card",
    imageSizes: [
      {
        name: "card",
        width: 640,
        height: 480,
      },
      {
        name: "feature",
        width: 1024,
        height: 576,
      },
    ],
  },
  fields: [
    {
      name: "alt",
      label: "Alt Text",
      type: "text",
      required: true,
    },
  ],
};

export default Media;

is my Media one for example

"payload": "^1.6.19",

is my version

paulpopus
4 months ago
You should update to latest, there's been a security patch released also
plainnn
4 months ago
Done, still getting the error though 🥲 - it's doing it every collection I have
paulpopus
4 months ago
do you have
custom
in any of your collections?
plainnn
4 months ago
I do not
paulpopus
4 months ago
are you using any other plugins? What's your full payload config?
alessiogr
Payload Team
4 months ago
custom is the new property added by
https://github.com/payloadcms/payload/pull/2436
which you can use to add additional information to fields - which can be read by plugins

Not quite sure why that error is happening though

(the custom field has been added in v1.7.1)

So you might have some plugins already using it, where your payload version is too low to use those plugins
paulpopus
4 months ago
Yeah hence I suggested he updates, but he's updated to latest and it still happens

@plainnn can you confirm its the latest payload version with
yarn list | grep payload
? or npm equivalent
teamkube
3 months ago
Any updates on this? I doubt having the plugin crash next.js apps by default and requiring a hack like a webpack alias that redirects fs to an empty module with
export default () => {}
is the "inteded" way to use this plugin.

This also isn't documented anywhere
alessiogr
Payload Team
3 months ago
The plugin itself
should
automatically do the aliasing for you (see
https://github.com/payloadcms/plugin-cloud-storage/blob/master/src/adapters/s3/webpack.ts
). Are you still getting a webpack alias error with the latest version, if yes can you share it and the code which causes it?
paulpopus
3 months ago
Yeah, there must be a misconfiguration somewhere, are you able to share a reproducible repo with your issue?

I've just setup Nextjs + payload-next and cloudflare r2 for s3 object storage today without any issues
teamkube
3 months ago
I am not sure what happened. I deleted my node_modules, made a fresh reinstall and the error went away

god i hate npm
alessiogr
Payload Team
3 months ago
I think those webpack alias things are cached under
node_modules/.cache
- next time it happens, it should be enough to just delete that folder
teamkube
3 months ago
error is back. i am currently investigating what change might have caused it

i did not change/install/update any packages tho

richadr

3 months ago

are you optionally enabling the adapter? something like

  cloudStorage({
    collections: {
      [Media.slug]: {
        adapter: process.env.S3_BUCKET ? adapter : null,
        disablePayloadAccessControl: true,
      },

teamkube
3 months ago
yes
richadr
3 months ago
and the error is when you run it locally, right? or when you want it to go to AWS S3

sorry, replied to wrong message
teamkube
3 months ago
currently working on the local version without AWS S3 enabled and getting the error
richadr
3 months ago
i see the code that Alessio mentions that changes the webpack config. but when you pass null as the adapter, this code is not being run
teamkube
3 months ago
i am not passing null as the adapter i am passing an empty array in that case
richadr
3 months ago
yes, which would mean that s3Adapter is not being run, which in turn means that the webpack config is not being changed

if you add the code from this message: Tim — 02/05/2023 11:11

it might work

but like you I would like the plugin to deal with this as intended
teamkube
3 months ago
so basicly you cant import the adapter unless you also use it?
richadr
3 months ago
by chance we are running into the exact same issue. i have two workarounds:

1. add the webpack code (from message Tim — 02/05/2023 11:11), which does what the adapter intends to do

2. add a fake collection and run the adapter at least once

what i did for 2 is:

add a collection
```
    { slug: 'test', fields: [], admin: { hidden: true } },
```
and add the plugin configuration, like this:
```
  cloudStorage({
    collections: {
      test: {
        adapter: adapter,
      },
      [Media.slug]: {
        adapter: process.env.S3_BUCKET ? adapter : null,
        disablePayloadAccessControl: true,
      },
      [Documents.slug]: {
        adapter: process.env.S3_BUCKET ? adapter : null,
        disablePayloadAccessControl: true,
      },
    },
  }),
```
both are far from ideal. I believe the plugin should be updated and the code in src/adapters/s3/webpack.ts (and probably src/adapters/azure/webpack.ts) should be moved into src/webpack.ts
teamkube
3 months ago
maybe this is a dumb question but why does an adapter that connects to S3 need fs in the first place?

i have used other plugins/adapters than also ran client side in the past and never ran into a similar issue
muperdev
3 months ago
can you share your package.json please?

@plainnn

if you deployed your project to payload cloud you don't need this config
richadr
3 months ago
this error occurs when building locally
denolfe
Payload Team
3 months ago
Hey @teamkube , I'm looking into this. There were some changes a little while back to accommodate large file uploads and temp files which leverages 'fs', probably something there

Hmm, just loaded up a fresh payload project, added the s3 adapter, and builds okay for me.

currently working on the local version without AWS S3 enabled and getting the error

@teamkube Do you have any extra detail I can work off of? Also payload version and plugin-cloud-storage version?

Ah, I was able to recreate.

The issue is due to
conditionally enabling
the plugin. If you include the plugin code at all, regardless of whether you put it into your plugins array, the webpack aliasing still needs to run.

So in your case running locally, the plugin code is in your config file,
but not being added as a plugin
. This means that the webpack alias that handles
fs
is not being run -> then causes the error.

We might need to brainstorm a pattern on how best to handle this, because your use-case is quite simple: conditionally add the plugin if an env is set. In reality, if you don't want to add the plugin,
the plugin webpack aliasing must still happen.
paulpopus
3 months ago
Long term, a plugin API

Short term, the plugin can provide its own
enabled
config
denolfe
Payload Team
3 months ago
Agreed, writing up an issue right now for this 👍

Thanks everyone on this thread. This was an interesting one.

Issue being tracked here, stay tuned:
https://github.com/payloadcms/plugin-cloud-storage/issues/54

@teamkube @muperdev @richadr

Just released 1.0.17, you can now conditionally set an
enabled
boolean option on the plugin. Give that a try and let me know if you have any issues.

https://github.com/payloadcms/plugin-cloud-storage#conditionally-enablingdisabling

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.