plugin-cloud-storage not working with Payload 3.0 BETA, "admin.webpack" is not allowed

[hammad-mohi]

Link to reproduction

https://github.com/hammad-mohi/payload-3.0-demo

Describe the Bug

The cloud storage plugin does not work with payload-3.0.0-beta.19. Check the following errors.

Packages

    "@aws-sdk/client-s3": "^3.564.0",
    "@aws-sdk/lib-storage": "^3.564.0",
    "@payloadcms/db-postgres": "3.0.0-beta.19",
    "@payloadcms/next": "3.0.0-beta.19",
    "@payloadcms/plugin-cloud-storage": "^1.1.2",
    "@payloadcms/plugin-form-builder": "^1.2.2",
    "@payloadcms/plugin-search": "^1.1.1",
    "@payloadcms/plugin-seo": "^2.3.2",
    "@payloadcms/richtext-lexical": "3.0.0-beta.19",
    "payload": "3.0.0-beta.19",

Payload Config

// payload.config.ts
import path from 'path';
import sharp from 'sharp';
import { fileURLToPath } from 'url';

import { en } from 'payload/i18n/en';
import { buildConfig } from 'payload/config';
import { postgresAdapter } from '@payloadcms/db-postgres';
import { lexicalEditor } from '@payloadcms/richtext-lexical';
import { cloudStorage } from '@payloadcms/plugin-cloud-storage';
import { s3Adapter } from '@payloadcms/plugin-cloud-storage/s3';

import Users from './collections/auth/Users';
import Admins from './collections/auth/Admins';
import Images from './collections/media/Images';
...

const filename = fileURLToPath(import.meta.url);
const dirname = path.dirname(filename);

export default buildConfig({
  admin: {
    user: Admins.slug,
  },
  editor: lexicalEditor(),
  collections: [
    Admins,
    Users,
    Images,
    ...
  ],
  upload: {
    limits: {
      fileSize: 50000000, // 50MB
    },
  },
  secret: process.env.PAYLOAD_SECRET || '',
  typescript: {
    outputFile: path.resolve(dirname, 'payload-types.ts'),
  },
  plugins: [
    cloudStorage({
      collections: {
        images: {
          adapter: s3Adapter({
            config: {
              endpoint: process.env.PAYLOAD_S3_ENDPOINT || '',
              credentials: {
                accessKeyId: process.env.PAYLOAD_S3_ACCESS_KEY_ID || '',
                secretAccessKey: process.env.PAYLOAD_S3_SECRET_ACCESS_KEY || '',
              },
            },
            bucket: process.env.PAYLOAD_S3_BUCKET || '',
          }),
        },
      },
    }),
  ],
  db: postgresAdapter({
    pool: {
      connectionString: process.env.DATABASE_URI,
    },
  }),
  i18n: {
    supportedLanguages: { en },
  },
  async onInit(payload) {
    const existinAdmins = await payload.find({
      collection: 'admins',
      limit: 1,
    });

    if (existinAdmins.docs.length === 0) {
      await payload.create({
        collection: 'admins',
        data: {
          email: process.env.PAYLOAD_ADMIN_USER || 'admin',
          password: process.env.PAYLOAD_ADMIN_PASSWORD || 'password',
          roles: ['admin'],
        },
      });
    }
  },
  sharp,
});

Dev

❯ bun dev
$ next dev
 ▲ Next.js 14.2.3
  - Local:        http://localhost:3000
  - Environments: .env.local, .env

 ✓ Starting...
 ✓ Ready in 2.6s
 ○ Compiling /src/middleware ...
 ✓ Compiled /src/middleware in 759ms (483 modules)
 ○ Compiling / ...
 ✓ Compiled / in 4.5s (708 modules)
 GET / 200 in 4699ms
 ○ Compiling /admin/[[...segments]] ...
 ✓ Compiled /admin/[[...segments]] in 10.1s (6463 modules)
[09:20:01] ERROR: There were 1 errors validating your Payload config
[09:20:01] ERROR: 1: "admin.webpack" is not allowed

Build

❯ bun run build
$ next build
  ▲ Next.js 14.2.3
  - Environments: .env.local, .env

   Creating an optimized production build ...
 ✓ Compiled successfully
 ✓ Linting and checking validity of types    
 ✓ Collecting page data    
 ✓ Generating static pages (7/7)
 ✓ Collecting build traces    
 ✓ Finalizing page optimization    

Route (app)                              Size     First Load JS
┌ ○ /                                    142 B          88.4 kB
├ ○ /_not-found                          883 B          89.2 kB
├ ƒ /admin/[[...segments]]               32.5 kB         452 kB
├ ƒ /api/[...slug]                       0 B                0 B
├ ƒ /api/graphql                         0 B                0 B
├ ƒ /api/graphql-playground              0 B                0 B
└ ○ /login                               467 B          95.5 kB
+ First Load JS shared by all            88.3 kB
  ├ chunks/7023-f9d935ccd18d788f.js      31.6 kB
  ├ chunks/fd9d1056-cdb4b687b96ca9f6.js  53.7 kB
  └ other shared chunks (total)          2.99 kB

ƒ Middleware                             53.4 kB

○  (Static)   prerendered as static content
ƒ  (Dynamic)  server-rendered on demand

Start

❯ bun start
$ next start
  ▲ Next.js 14.2.3
  - Local:        http://localhost:3000

 ✓ Starting...
 ✓ Ready in 184ms
[09:20:58] WARN: No email adapter provided. Email will be written to console. More info at https://payloadcms.com/docs/email/overview.
Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server". Or maybe you meant to call this function rather than return it.
  {avatar: "default", custom: {}, dateFormat: ..., disable: ..., inactivityRoute: ..., logoutRoute: ..., meta: ..., user: ..., webpack: function}
                                                                                                                                        ^^^^^^^^
    at ek (.../node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:140735)
    at Object.toJSON (.../node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:135755)
    at stringify (<anonymous>)
    at eR .../node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:142219)
    at eE (.../node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:142698)
    at Timeout._onTimeout (.../node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:135475)
    at listOnTimeout (node:internal/timers:573:17)
    at process.processTimers (node:internal/timers:514:7) {
  digest: '548733838'
}

To Reproduce

To repro clone the following repo and install:

git clone https://github.com/hammad-mohi/payload-3.0-demo
pnpm install
pnpm dev

Make sure to add the following variables to your .env file:

DATABASE_URI
PAYLOAD_SECRET
PAYLOAD_S3_ENDPOINT
PAYLOAD_S3_ACCESS_KEY_ID
PAYLOAD_S3_SECRET_ACCESS_KEY
PAYLOAD_S3_BUCKET

Payload Version

3.0.0-beta.19

Adapters and Plugins

plugin-cloud-storage

[ringge]

I also got exact same problem

[hammad-mohi]

I got it to work by moving to the new @payloadcms/storage-s3 plugin from this PR: https://github.com/payloadcms/payload/pull/5928

[jmikrut]

Hey there - yes, this is becaues you are using an old version of the cloud-storage plugin. On 3.x, you need to use 3.x-compatible plugins as @hammad-mohi indicated.

[ringge]

I got it to work by moving to the new @payloadcms/storage-s3 plugin from this PR: #5928

thanks for sharing the solution

[github-actions[bot]]

This issue has been automatically locked. Please open a new issue if this issue persists with any additional detail.