New to the project, having trouble in uploading my first jpeg file

[wangrui6]

Great work and project!

I have set up the configuration with AWS S3 and Vercel Postgres. Now I am ready to upload my first picture but it always returns something like ⨯ upstream image response failed for https:/<my-s3-bucket>.s3.us-east-1.amazonaws.com/upload-7EQIvB3Z1fiHTPyj.jpeg 403

I have followed the README.md to set up alternative image storage, including IAM policy and users and add all 4 env variables to my local .env.local. Anything I miss?

Cheers,

[sambecker]

Are you seeing this locally, in production, or both?

[wangrui6]

just in localhost:3000 for now. I haven't deployed the code to Vercel yet.

Here is my CORS policy and IAM policy following the readme:

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "PUT"
        ],
        "AllowedOrigins": [
            "http://localhost:*",
            "https://my-project*.vercel.app",
            "https://my-project.com"
        ],
        "ExposeHeaders": []
    }
]

and

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": [
                "s3:PutObject",
                "s3:PutObjectACL",
                "s3:GetObject",
                "s3:ListBucket",
                "s3:DeleteObject"
            ],
            "Resource": [
                "arn:aws:s3:::my-project-images",
                "arn:aws:s3:::my-project-images/*"
            ]
        }
    ]
}

Thanks!

[sambecker]

Can you try consoling out HOSTNAME_AWS_S3 from next.cofig.js? I wonder if that's being stored correctly. It could be a next/image issue vs an image upload issue? Are you certain the image isn't getting uploaded?

[wangrui6]

correct. I checked the S3 bucket and it is still an empty bucket. If you haven't heard this issue from anyone else recently, I would assume it's related to my setup.

[sambecker]

Can't say I've see any AWS-related issues lately.

Can you confirm these environment variables have been set, and that the first two are prefixed with NEXT_PUBLIC_?

• NEXT_PUBLIC_AWS_S3_BUCKET (public prefix)
• NEXT_PUBLIC_AWS_S3_REGION (public prefix)
• AWS_S3_ACCESS_KEY
• AWS_S3_SECRET_ACCESS_KEY

Lastly, what do you see under storage when you visit /admin/configuration?

[wangrui6]

Hi @sambecker thanks for the quick followup. It turns out it's due to that I am using npm run dev and the turbo mode is causing some incompatibility issues when compiling, which I am pasting below.

 ▲ Next.js 14.2.7 (turbo)
  - Local:        http://localhost:3000
  - Environments: .env.local

 ✓ Starting...
 ✓ Compiled in 412ms
 ✓ Ready in 1119ms
 ○ Compiling / ...
 ✓ Compiled / in 9.2s
 GET / 200 in 10002ms
Couldn't load fs
Couldn't load zlib
 GET / 200 in 689ms
 POST / 200 in 667ms
 POST / 200 in 436ms
 POST / 200 in 607ms
 ○ Compiling /api/storage/presigned-url/[key] ...
 ✓ Compiled /api/storage/presigned-url/[key] in 901ms
 ⨯ Error: Could not parse module '[project-path]/node_modules/next/dist/server/future/route-modules/app-route/vendored/contexts/app-router-context.js'
    at Object.<anonymous> ([project-path]/.next/server/chunks/node_modules_next_e0730a._.js:7705:11)
    at [project-path]/node_modules/next/dist/server/future/route-modules/app-route/vendored/contexts/app-router-context.js [app-route] (ecmascript) ([project-path]/.next/server/chunks/node_modules_next_e0730a._.js:7708:3)
    at instantiateModule ([project-path]/.next/server/chunks/[turbopack]_runtime.js:520:23)
    at getOrInstantiateModuleFromParent ([project-path]/.next/server/chunks/[turbopack]_runtime.js:572:12)
    at commonJsRequire ([project-path]/.next/server/chunks/[turbopack]_runtime.js:136:20)
    at Object.<anonymous> ([project-path]/.next/server/chunks/node_modules_next_e0730a._.js:8174:40)
    at [project-path]/node_modules/next/dist/client/components/navigation.js [app-route] (ecmascript) ([project-path]/.next/server/chunks/node_modules_next_e0730a._.js:8375:3)
    at instantiateModule ([project-path]/.next/server/chunks/[turbopack]_runtime.js:520:23)
    at getOrInstantiateModuleFromParent ([project-path]/.next/server/chunks/[turbopack]_runtime.js:572:12)
    at commonJsRequire ([project-path]/.next/server/chunks/[turbopack]_runtime.js:136:20)
    at Object.<anonymous> ([project-path]/.next/server/chunks/node_modules_next_e0730a._.js:8378:18)
    at [project-path]/node_modules/next/navigation.js [app-route] (ecmascript) ([project-path]/.next/server/chunks/node_modules_next_e0730a._.js:8380:3)
    at instantiateModule ([project-path]/.next/server/chunks/[turbopack]_runtime.js:520:23)
    at getOrInstantiateModuleFromParent ([project-path]/.next/server/chunks/[turbopack]_runtime.js:572:12)
    at esmImport ([project-path]/.next/server/chunks/[turbopack]_runtime.js:122:20)
    at [project-path]/.next/server/chunks/node_modules_3e935a._.js:5171:140
    at [project-path]/node_modules/next-auth/lib/actions.js [app-route] (ecmascript) ([project-path]/.next/server/chunks/node_modules_3e935a._.js:5278:3)
    at instantiateModule ([project-path]/.next/server/chunks/[turbopack]_runtime.js:520:23)
    at getOrInstantiateModuleFromParent ([project-path]/.next/server/chunks/[turbopack]_runtime.js:572:12)
    at esmImport ([project-path]/.next/server/chunks/[turbopack]_runtime.js:122:20)
    at [project-path]/.next/server/chunks/node_modules_3e935a._.js:5422:152
    at [project-path]/node_modules/next-auth/index.js [app-route] (ecmascript) <module evaluation> ([project-path]/.next/server/chunks/node_modules_3e935a._.js:5427:3)
    at instantiateModule ([project-path]/.next/server/chunks/[turbopack]_runtime.js:520:23)
    at getOrInstantiateModuleFromParent ([project-path]/.next/server/chunks/[turbopack]_runtime.js:572:12)
    at esmImport ([project-path]/.next/server/chunks/[turbopack]_runtime.js:122:20)
    at [project-path]/.next/server/chunks/src_b51e28._.js:1039:171
    at [project-path]/src/auth/index.ts [app-route] (ecmascript) ([project-path]/.next/server/chunks/src_b51e28._.js:1092:3)
    at instantiateModule ([project-path]/.next/server/chunks/[turbopack]_runtime.js:520:23)
    at getOrInstantiateModuleFromParent ([project-path]/.next/server/chunks/[turbopack]_runtime.js:572:12)
    at esmImport ([project-path]/.next/server/chunks/[turbopack]_runtime.js:122:20)
    at [project-path]/.next/server/chunks/src_b51e28._.js:1465:126
    at [project-path]/src/app/api/storage/presigned-url/[key]/route.ts [app-route] (ecmascript) ([project-path]/.next/server/chunks/src_b51e28._.js:1522:3)
    at instantiateModule ([project-path]/.next/server/chunks/[turbopack]_runtime.js:520:23)
    at getOrInstantiateModuleFromParent ([project-path]/.next/server/chunks/[turbopack]_runtime.js:572:12)
    at esmImport ([project-path]/.next/server/chunks/[turbopack]_runtime.js:122:20)
    at [project-path]/.next/server/chunks/node_modules_next_e0730a._.js:8395:174
    at [project-path]/node_modules/next/dist/esm/build/templates/app-route.js { INNER_APP_ROUTE => "[project-path]/src/app/api/storage/presigned-url/[key]/route.ts [app-route] (ecmascript)" } [app-route] (ecmascript) ([project-path]/.next/server/chunks/node_modules_next_e0730a._.js:8430:3)
    at instantiateModule ([project-path]/.next/server/chunks/[turbopack]_runtime.js:520:23)
    at instantiateRuntimeModule ([project-path]/.next/server/chunks/[turbopack]_runtime.js:580:12)
    at Object.getOrInstantiateRuntimeModule ([project-path]/.next/server/chunks/[turbopack]_runtime.js:595:12)
    at Object.<anonymous> ([project-path]/.next/server/app/api/storage/presigned-url/[key]/route.js:10:26)
    at Module._compile (node:internal/modules/cjs/loader:1376:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
    at Module.load (node:internal/modules/cjs/loader:1207:32)
    at Module._load (node:internal/modules/cjs/loader:1023:12)
    at Module.require (node:internal/modules/cjs/loader:1235:19)
    at mod.require ([project-path]/node_modules/next/dist/server/require-hook.js:65:28)
    at require (node:internal/modules/helpers:176:18)
    at requirePage ([project-path]/node_modules/next/dist/server/require.js:109:84)
    at [project-path]/node_modules/next/dist/server/load-components.js:98:84 {
  code: 'MODULE_UNPARSEABLE',
  page: '/api/storage/presigned-url/upload-13Pd7pK4mbLV5asQ.jpeg'
}
 ○ Compiling /_error ...
 ✓ Compiled /_error in 504ms
 GET /api/storage/presigned-url/upload-13Pd7pK4mbLV5asQ.jpeg 500 in 1810ms
 ○ Compiling /_not-found/page ...
 ✓ Compiled /_not-found/page in 980ms

After installing pnpm and vercel and using vercel dev, I can now seamlessly upload images to the S3 bucket and display on my localhost.

I paste the above logging in case you need it for future reference.

Cheers.

[sambecker]

Thanks for that update. I really appreciate it. If I remember correctly, using turbo requires Next.js 15 canary for broad compatibility.

Out of curiosity, did you enable turbo manually, or did it turn on automatically when running npm run dev?

[wangrui6]

Sure. I didn't change any of the build configuration and simply run the command. Based on the package.json file

  "scripts": {
    "dev": "next dev --turbo",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "test": "jest --watch --transformIgnorePatterns 'node_modules/(?!my-library-dir)/'",
    "analyze": "ANALYZE=true next build"
  },

I believe the turbo mode is running automatically when hitting npm run dev

[sambecker]

This is really helpful. Thanks so much @wangrui6.