 ○ Compiling /api/[...slug] ...
 ✓ Compiled /api/[...slug] in 1708ms (5554 modules)
 GET /api/payload-preferences/nav 200 in 2861ms
 GET /api/users/me 200 in 2889ms
getFromImportMap: PayloadComponent not found in importMap {
  key: '@payloadcms/storage-s3/client#S3ClientUploadHandler',
  PayloadComponent: {
    clientProps: {
      collectionSlug: 'media',
      enabled: false,
      extra: undefined,
      prefix: undefined,
      serverHandlerPath: '/storage-s3-generate-signed-url'
    },
    path: '@payloadcms/storage-s3/client#S3ClientUploadHandler'
  },
  schemaPath: ''
} You may need to run the `payload generate:importmap` command to generate the importMap ahead of runtime.

arseniyxlast year
How your tsconfig looks like?

joelcoreylast year

The root one?

{
  "compilerOptions": {
    "baseUrl": ".",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": [
        "./src/*"
      ],
      "@payload-config": [
        "./src/payload.config.ts"
      ]
    },
    "target": "ES2017"
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    ".next/types/**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}

arseniyxlast year
most of the time its something with tsconfig, you might be need "declaration": false, if its not work I would try to check with the tsconfig from the website templater or something
joelcoreylast year
I immediately noticed that I am missing " "extends": "./tsconfig.base.json"," that is present in the Payload Github website repo

Yeah my tsconfig.json looks nothing like theirs.

Tried starting a new project and pasting in the ts config

no such luck
marwin5704last year
got the same issue
mrnoa2last year
make sure you update all related packages to
3.32.0
"dependencies": {

"payload": "3.32.0",

"@payloadcms/db-postgres": "3.32.0",

"@payloadcms/next": "3.32.0",

"@payloadcms/payload-cloud": "3.32.0",

"@payloadcms/plugin-cloud-storage": "3.32.0",

"@payloadcms/plugin-seo": "3.32.0",

"@payloadcms/richtext-lexical": "3.32.0",

"@payloadcms/richtext-slate": "3.32.0",

"@payloadcms/storage-s3": "3.32.0",

}

my tsconfig

{ "compilerOptions": { "baseUrl": ".", "lib": ["DOM", "DOM.Iterable", "ES2022"], "allowJs": true, "skipLibCheck": true, "strict": true, "noEmit": true, "esModuleInterop": true, "module": "esnext", "moduleResolution": "bundler", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", "incremental": true, "sourceMap": true, "plugins": [ { "name": "next" } ], "paths": { "@/*": ["./src/*"], "@payload-config": ["./src/payload.config.ts"] }, "target": "ES2022" }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], "exclude": ["node_modules"] }
joelcoreylast year
The error persists.
arseniyxlast year
I belive easiest way to find out whats wrong, is by commenting out part of config (no need to run) and regenerate until, you find each place make the trouble. If you getting this error even with empty config. It most likely something with ts or packages

joelcoreylast year

I would probably come at it from the other angle and just make an entirely new project and plug in the existing database.

 You may need to run the `payload generate:importmap` command to generate the importMap ahead of runtime.
 GET / 200 in 11952ms
getFromImportMap: PayloadComponent not found in importMap {
  key: '@payloadcms/storage-s3/client#S3ClientUploadHandler',
  PayloadComponent: {
    clientProps: {
      collectionSlug: 'media',
      enabled: false,
      extra: undefined,
      prefix: undefined,
      serverHandlerPath: '/storage-s3-generate-signed-url'
    },
    path: '@payloadcms/storage-s3/client#S3ClientUploadHandler'
  },
  schemaPath: ''

I already know what the issue is. Well, kind of. It is obviously the image storage.

AND: yes I did do the generate types command

I could also make is JS and not TS, as TS often seems to be more trouble than it is worth.

arseniyxlast year
try to go import map, and see if you can navigate to the: @payloadcms/storage-s3/client

joelcoreylast year

export declare const S3ClientUploadHandler: ({ children, collectionSlug, enabled, extra, prefix, serverHandlerPath, }: {
    children: import("react").ReactNode;
    collectionSlug: import("payload").UploadCollectionSlug;
    enabled?: boolean;
    extra: Record<string, unknown>;
    prefix?: string;
    serverHandlerPath: string;
}) => import("react").JSX.Element;
//# sourceMappingURL=S3ClientUploadHandler.d.ts.map

Yes

arseniyxlast year
thats strange because if I going i see:

export { S3ClientUploadHandler } from '../client/S3ClientUploadHandler.js';

//# sourceMappingURL=client.js.map

might it be that you still using old version somehow, if you run pnpm ls @payloadcms/storage-s3 --depth=3

you see the correct version?
joelcoreylast year
```
dependencies:
@payloadcms/storage-s3 3.34.0
```
yep

I will try pasting in what you have and see if that works later when I get back. You have been very helpful! Thank you.

Or maybe uninstall just that package and reinstall
arseniyxlast year
maybe you have multiple ts-configs and the ts config that running with
payload generate:importmap
is not the same you use by default?

joelcoreylast year

My spidey senses point towards this in Payload config:

plugins: [
    s3Storage({
      collections: {
        media: true,
      },
      bucket: process.env.S3_BUCKET,
      config: {
        endpoint: process.env.S3_ENDPOINT,
        credentials: {
          accessKeyId: process.env.S3_ACCESS_KEY_ID,
          secretAccessKey: process.env.S3_SECRET_ACCESS_KEY,
        },
        region: process.env.S3_REGION,
        // ... Other S3 configuration
                requestChecksumCalculation: "WHEN_REQUIRED",
                responseChecksumValidation: "WHEN_REQUIRED",
      },
    }),
  ],

I've had a pretty in depth convo with ChatGPT. At this point it thinks I am the one hallucinating. HAHAHA

Started a new 3.35.1 project.

Copied in relevant config, collections, blocks, etc.

Media is throwing a "ERROR: Region is missing" when it is clearly not.

Some progress is better than none.

misconfigured s3 variables. Working.

themachine048812 months ago
Do you remember the solution for this?
joelcorey12 months ago
In order to migrate from 3.24 to something newer I made a completely new project and slowly migrated everything over

It was EXTREMELY painful.
themachine048812 months ago
Ah okay, I thought you fixed it by the s3 variables. I just fixed it yesterday with adding enabled: true like below to the s3 configuration:

s3Storage({ enabled: true,

I use s3 locally aswell, but you can enable based on your environment
joelcorey12 months ago
Didn't know that.

If I remember correctly, I did have some Vercel env vars that were part of an additional oversight/error after I had resolved the primary issue.
themachine048812 months ago
Alright I see. I found the fix here for my problem if anyone comes across this while searching:
https://discord.com/channels/967097582721572934/1354569683096961124

Open

Continue the discussion in Discord

Star on GitHub

Star

Chat on Discord

Discord

online

Can't find what you're looking for?

Get dedicated engineering support directly from the Payload team.