s3 adapter is not working with create-payload-app template

[MoSattler]

Repo for reproduction: https://github.com/MoSattler/fs-repro

Reproduction steps:

1. npx create-payload-app fs-repro - choose blank + typescript
2. yarn add @payloadcms/plugin-cloud-storage @aws-sdk/client-s3 @aws-sdk/lib-storage @aws-sdk/client-s3
3. add S3 to payload config (see here)
4. run yarn build

output is:

Module not found: Error: Can't resolve 'fs' in '/Users/user/fs-repro/node_modules/@payloadcms/plugin-cloud-storage/dist/adapters/s3'

[paulpopus]

In your reproduction repo, I don't see the plugin being added into the payload config?

You need a plugins key like this

collections: [],
plugins: [
    cloudStorage({
      collections: {
        media: {
          adapter: adapter,
        },
      },
    }),

Edit: You need to make sure that this "media" collection ^ above exists..it can be named anything but it needs to have that "uploads: true" config like here https://github.com/payloadcms/website-cms/blob/main/src/collections/Media.ts

[MoSattler]

@paulpopus I just did it like this as the minimal reproduction steps. The same things also happen when adding everything properly.

If I would have to guess I'd say that a code requiring fs somehow ends up in the FE bundle, where fs obviously isn't supported.

Checking the code, I think this commit might be related: https://github.com/payloadcms/plugin-cloud-storage/commit/e56518e70217f22fb7ae60ec75e207dc9a0d8497

[denolfe]

@MoSattler What version of Payload and plugin is being installed? I'm unable to recreate this. Only difference being, I used the blog template which has a media collection ready to go.

Do you have any other code being pulled in? That commit added an additional alias for fs, so I wouldn't expect it to cause the issue you're seeing.

[paulpopus]

Yeah I just pulled this down and can reproduce. Weird cause I updated our project and didn't encounter it in the existing one.

[MoSattler]

@denolfe it's a fresh repo created by create-payload-app. I made no other modifications besides importing the s3 adapter as shown. You should be able to reproduce it using my listed reproduction steps. Maybe the issue is some build config in the create-payload-app template?

{
  "dependencies": {
    "@aws-sdk/client-s3": "^3.272.0",
    "@aws-sdk/lib-storage": "^3.272.0",
    "@payloadcms/plugin-cloud-storage": "^1.0.14",
    "dotenv": "^8.2.0",
    "express": "^4.17.1",
    "payload": "^1.6.11"
  },
  "devDependencies": {
    "@types/express": "^4.17.9",
    "copyfiles": "^2.4.1",
    "cross-env": "^7.0.3",
    "nodemon": "^2.0.6",
    "ts-node": "^9.1.1",
    "typescript": "^4.8.4"
  }
}

[paulpopus]

@MoSattler @denolfe

The issue seems related to a lack of a config and Media document being added, in this ^ repo which I could reproduce, I added a new Media collection and added it into the config and the issue went away:

import { buildConfig } from 'payload/config'
import path from 'path'
// import Examples from './collections/Examples';
import Users from './collections/Users'
import { Media } from './collections/Media'
import { cloudStorage } from '@payloadcms/plugin-cloud-storage'
import { s3Adapter } from '@payloadcms/plugin-cloud-storage/s3'

const doS3Adapter = s3Adapter({
  config: {
    endpoint: process.env.S3_ENDPOINT,
    credentials: {
      accessKeyId: process.env.S3_ACCESS_KEY,
      secretAccessKey: process.env.S3_SECRET_KEY,
    },
  },
  bucket: process.env.S3_BUCKET,
})

export default buildConfig({
  serverURL: 'http://localhost:3009',
  admin: {
    user: Users.slug,
  },
  collections: [
    Users,
    Media,
    // Add Collections here
    // Examples,
  ],
  typescript: {
    outputFile: path.resolve(__dirname, 'payload-types.ts'),
  },
  graphQL: {
    schemaOutputFile: path.resolve(__dirname, 'generated-schema.graphql'),
  },
  plugins: [
    cloudStorage({
      collections: {
        media: {
          adapter: doS3Adapter,
        },
      },
    }),
  ],
})

[MoSattler]

Yep, @paulpopus, you are right. I guess the error message threw me way off. Thank you everyone!

[denolfe]

All good, just for some additional context - a plugin's webpack aliasing will only be applied if it is present in the plugins array of your config. So since you weren't including the plugin in the config, only instantiating it, the webpack aliasing for fs wasn't being applied.

[MoSattler]

got it, thanks for the context!