search

sst / sst

Build full-stack apps on your own infrastructure.
https://sst.dev
MIT License
21.63k stars 1.64k forks source link

Unable to deploy NextJS Site #4931

Closed Sunit-Kulkarni closed 7 months ago

Sunit-Kulkarni commented 7 months ago

When following the docs directions for getting started with NextJS, I receive the following error below. This has been happening starting with version 0.0.119 all the way to the current version 0.0.128

Running "npx --yes open-next@3.0.0-rc.5 build" script
Next.js v14.1.3
OpenNext v3.0.0-rc.5
┌─────────────────────────────────┐
│ OpenNext — Building Next.js app │
└─────────────────────────────────┘
> next-ion@0.1.0 build
> next build
   ▲ Next.js 14.1.3
   Creating an optimized production build ...
(node:24321) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
(node:24337) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
 ✓ Compiled successfully
   Linting and checking validity of types ...
Failed to compile.
.sst/platform/src/components/aws/ssr-site.ts:1198:39
Type error: Type 'string | UnwrappedArray<string>' can only be iterated through when using the '--downlevelIteration' flag or with a '--target' of 'es2015' or higher.
  1196 |             });
  1197 |           } else {
> 1198 |             invalidationPaths.push(...(invalidation?.paths || []));
       |                                       ^
  1199 |           }
  1200 |           if (invalidationPaths.length === 0) return;
  1201 |
node:internal/errors:956
  const err = new Error(message);
              ^
Error: Command failed: npm run build
    at genericNodeError (node:internal/errors:956:15)
    at wrappedFn (node:internal/errors:510:14)
    at checkExecSyncError (node:child_process:890:11)
    at Object.execSync (node:child_process:962:15)
    at buildNextjsApp (file:///Users/sunitkulkarni/.npm/_npx/243dd04f789c84f7/node_modules/open-next/dist/build.js:133:8)
    at build (file:///Users/sunitkulkarni/.npm/_npx/243dd04f789c84f7/node_modules/open-next/dist/build.js:36:11) {
  status: 1,
  signal: null,
  output: [ null, null, null ],
  pid: 24289,
  stdout: null,
  stderr: null
}
Node.js v21.5.0
(node:24256) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
|  Creating    sst:aws:Nextjs → QleoIon
(node:24256) PromiseRejectionHandledWarning: Promise rejection was handled asynchronously (rejection id: 22)
(node:24256) PromiseRejectionHandledWarning: Promise rejection was handled asynchronously (rejection id: 23)
|  Creating    sst:aws:Nextjs → sst:aws:Bucket → QleoIonAssets
|  Created     sst:aws:Nextjs → sst:aws:Bucket → QleoIonAssets (8ms)
|  Error
|  VisibleError: There was a problem building the "QleoIon" site.
|      at file:///Users/sunitkulkarni/QleoCode/next-ion/.sst/platform/src/components/aws/ssr-site.ts:469:17
|      at /Users/sunitkulkarni/QleoCode/next-ion/.sst/platform/node_modules/@pulumi/output.ts:398:31
|      at Generator.next (<anonymous>)
|      at /Users/sunitkulkarni/QleoCode/next-ion/.sst/platform/node_modules/@pulumi/pulumi/output.js:21:71
|      at new Promise (<anonymous>)
|      at __awaiter (/Users/sunitkulkarni/QleoCode/next-ion/.sst/platform/node_modules/@pulumi/pulumi/output.js:17:12)
|      at applyHelperAsync (/Users/sunitkulkarni/QleoCode/next-ion/.sst/platform/node_modules/@pulumi/pulumi/output.js:239:12)
|      at /Users/sunitkulkarni/QleoCode/next-ion/.sst/platform/node_modules/@pulumi/output.ts:310:13 {
|    promise: Promise { <rejected> [Circular *1] }
|  }
|  Creating    sst:aws:Nextjs → sst:aws:Bucket → random:index:RandomId → QleoIonAssetsId
|  Created     sst:aws:Nextjs → sst:aws:Bucket → random:index:RandomId → QleoIonAssetsId (4ms)
|  Creating    sst:aws:Nextjs → aws:cloudfront:OriginAccessIdentity → QleoIonOriginAccessIdentity
|  Creating    sst:aws:Nextjs → sst:aws:Bucket → aws:s3:BucketV2 → QleoIonAssetsBucket
|  Created     sst:aws:Nextjs → aws:cloudfront:OriginAccessIdentity → QleoIonOriginAccessIdentity (518ms)
|  Created     sst:aws:Nextjs → sst:aws:Bucket → aws:s3:BucketV2 → QleoIonAssetsBucket (737ms)
|  Creating    sst:aws:Nextjs → sst:aws:Bucket → aws:s3:BucketPublicAccessBlock → QleoIonAssetsPublicAccessBlock
|  Creating    sst:aws:Nextjs → sst:aws:Bucket → aws:s3:BucketCorsConfigurationV2 → QleoIonAssetsCors
|  Created     sst:aws:Nextjs → sst:aws:Bucket → aws:s3:BucketPublicAccessBlock → QleoIonAssetsPublicAccessBlock (121ms)
|  Creating    sst:aws:Nextjs → sst:aws:Bucket → aws:s3:BucketPolicy → QleoIonAssetsPolicy
|  Created     sst:aws:Nextjs → sst:aws:Bucket → aws:s3:BucketPolicy → QleoIonAssetsPolicy (8.562s)
|  Created     sst:aws:Nextjs → sst:aws:Bucket → aws:s3:BucketCorsConfigurationV2 → QleoIonAssetsCors (15.81s)

❌ Failed
   VisibleError: There was a problem building the "QleoIon" site.
       at file:///Users/sunitkulkarni/QleoCode/next-ion/.sst/platform/src/components/aws/ssr-site.ts:469:17
       at /Users/sunitkulkarni/QleoCode/next-ion/.sst/platform/node_modules/@pulumi/output.ts:398:31
       at Generator.next (<anonymous>)
       at /Users/sunitkulkarni/QleoCode/next-ion/.sst/platform/node_modules/@pulumi/pulumi/output.js:21:71
       at new Promise (<anonymous>)
       at __awaiter (/Users/sunitkulkarni/QleoCode/next-ion/.sst/platform/node_modules/@pulumi/pulumi/output.js:17:12)
       at applyHelperAsync (/Users/sunitkulkarni/QleoCode/next-ion/.sst/platform/node_modules/@pulumi/pulumi/output.js:239:12)
       at /Users/sunitkulkarni/QleoCode/next-ion/.sst/platform/node_modules/@pulumi/output.ts:310:13 {
     promise: Promise { <rejected> [Circular *1] }
   }

If you've already posted your issue on Discord, make sure to leave a link to it here. https://discord.com/channels/983865673656705025/1177071497974648952/1214751817590640732

Sunit-Kulkarni commented 7 months ago

And here is my corresponding sst.config.ts file:

/// <reference path="./.sst/platform/config.d.ts" />

export default $config({
  app(input) {
    return {
      name: "next-ion",
      removalPolicy: input?.stage === "production" ? "retain" : "remove",
    };
  },
  async run() {
    const site = new sst.aws.Nextjs("QleoIon", {
      domain: {
        hostedZone: "dev.qleo.ai",
        domainName: "ion.dev.qleo.ai"
      }
    })

    return {
      url: site.url
    }
  },
});
fwang commented 7 months ago

Hi @Sunit-Kulkarni, if u run npx --yes open-next@3.0.0-rc.5 build manually, does the build succeed?

Sunit-Kulkarni commented 7 months ago

@fwang Nope, looks like that step yielded the same error: 

npx --yes open-next@3.0.0-rc.5 build
Next.js v14.1.3
OpenNext v3.0.0-rc.5

┌─────────────────────────────────┐
│ OpenNext — Building Next.js app │
└─────────────────────────────────┘

> next-ion@0.1.0 build
> next build

   ▲ Next.js 14.1.3

   Creating an optimized production build ...
 ✓ Compiled successfully
   Linting and checking validity of types  ...Failed to compile.

.sst/platform/src/components/aws/ssr-site.ts:1198:39
Type error: Type 'string | UnwrappedArray<string>' can only be iterated through when using the '--downlevelIteration' flag or with a '--target' of 'es2015' or higher.

  1196 |             });
  1197 |           } else {
> 1198 |             invalidationPaths.push(...(invalidation?.paths || []));
       |                                       ^
  1199 |           }
  1200 |           if (invalidationPaths.length === 0) return;
  1201 |
   Linting and checking validity of types  .node:internal/errors:956
  const err = new Error(message);
              ^

Error: Command failed: npm run build
    at genericNodeError (node:internal/errors:956:15)
    at wrappedFn (node:internal/errors:510:14)
    at checkExecSyncError (node:child_process:890:11)
    at Object.execSync (node:child_process:962:15)
    at buildNextjsApp (file:///Users/sunitkulkarni/.npm/_npx/243dd04f789c84f7/node_modules/open-next/dist/build.js:133:8)
    at build (file:///Users/sunitkulkarni/.npm/_npx/243dd04f789c84f7/node_modules/open-next/dist/build.js:36:11) {
  status: 1,
  signal: null,
  output: [ null, null, null ],
  pid: 34095,
  stdout: null,
  stderr: null
}

Node.js v21.5.0
thdxr commented 7 months ago

how did you setup the nextjs site?

in your tsconfig.json can you try adding sst.config.ts to the exclude list?

Sunit-Kulkarni commented 7 months ago

My first attempt at setting up the NextJS site was deploying a raw template from the npx create-next-app@latest with typescript enabled with my own custom domain. I also copied and pasted the getting started guide which includes the S3 bucket. Both yielded the same results above.

But now with the suggestion of excluding sst.config.ts in tsconfig.json, a new error occurs below:

SST ❍ ion 0.0.128  ready!

➜  App:        next-ion
   Stage:      sunitkulkarni

~  Deploying

|  Creating    sst:aws:Nextjs → MyWeb
|  Creating    sst:aws:Bucket → MyBucket
|  Creating    sst:aws:Nextjs → sst:aws:Bucket → MyWebAssets
|  Created     sst:aws:Bucket → MyBucket (20ms)
|  Created     sst:aws:Nextjs → sst:aws:Bucket → MyWebAssets (410ms)
|  Creating    sst:aws:Nextjs → sst:aws:Bucket → random:index:RandomId → MyWebAssetsId
|  Creating    sst:aws:Bucket → random:index:RandomId → MyBucketId
|  Created     sst:aws:Nextjs → sst:aws:Bucket → random:index:RandomId → MyWebAssetsId (6ms)
|  Created     sst:aws:Bucket → random:index:RandomId → MyBucketId (6ms)
|  Creating    sst:aws:Nextjs → sst:aws:Bucket → aws:s3:BucketV2 → MyWebAssetsBucket
|  Creating    sst:aws:Nextjs → aws:cloudfront:OriginAccessIdentity → MyWebOriginAccessIdentity
|  Creating    sst:aws:Bucket → aws:s3:BucketV2 → MyBucketBucket
|  Created     sst:aws:Nextjs → aws:cloudfront:OriginAccessIdentity → MyWebOriginAccessIdentity (427ms)
|  Created     sst:aws:Bucket → aws:s3:BucketV2 → MyBucketBucket (749ms)
|  Created     pulumi:pulumi:Stack → next-ion-sunitkulkarni (6.77s)
|  Creating    sst:aws:Bucket → aws:s3:BucketPublicAccessBlock → MyBucketPublicAccessBlock
|  Error
|  TypeError: args.type.replaceAll is not a function
|      at file:///Users/sunitkulkarni/QleoCode/next-ion/.sst/platform/src/components/link.ts:25:29
|      at /Users/sunitkulkarni/QleoCode/next-ion/.sst/platform/node_modules/@pulumi/output.ts:398:31
|      at Generator.next (<anonymous>)
|      at /Users/sunitkulkarni/QleoCode/next-ion/.sst/platform/node_modules/@pulumi/pulumi/output.js:21:71
|      at new Promise (<anonymous>)
|      at __awaiter (/Users/sunitkulkarni/QleoCode/next-ion/.sst/platform/node_modules/@pulumi/pulumi/output.js:17:12)
|      at applyHelperAsync (/Users/sunitkulkarni/QleoCode/next-ion/.sst/platform/node_modules/@pulumi/pulumi/output.js:239:12)
|      at /Users/sunitkulkarni/QleoCode/next-ion/.sst/platform/node_modules/@pulumi/output.ts:310:13
|      at processTicksAndRejections (internal/process/task_queues.js:93:5)
|  Creating    sst:aws:Bucket → aws:s3:BucketCorsConfigurationV2 → MyBucketCors
|  Created     sst:aws:Nextjs → sst:aws:Bucket → aws:s3:BucketV2 → MyWebAssetsBucket (790ms)
|  Creating    sst:aws:Nextjs → sst:aws:Bucket → aws:s3:BucketCorsConfigurationV2 → MyWebAssetsCors
|  Creating    sst:aws:Nextjs → sst:aws:Bucket → aws:s3:BucketPublicAccessBlock → MyWebAssetsPublicAccessBlock
|  Created     sst:aws:Bucket → aws:s3:BucketPublicAccessBlock → MyBucketPublicAccessBlock (169ms)
|  Creating    sst:aws:Bucket → aws:s3:BucketPolicy → MyBucketPolicy
|  Created     sst:aws:Nextjs → sst:aws:Bucket → aws:s3:BucketCorsConfigurationV2 → MyWebAssetsCors (199ms)
|  Created     sst:aws:Nextjs → sst:aws:Bucket → aws:s3:BucketPublicAccessBlock → MyWebAssetsPublicAccessBlock (322ms)
|  Creating    sst:aws:Nextjs → sst:aws:Bucket → aws:s3:BucketPolicy → MyWebAssetsPolicy
|  Created     sst:aws:Bucket → aws:s3:BucketPolicy → MyBucketPolicy (244ms)
|  Created     sst:aws:Nextjs → sst:aws:Bucket → aws:s3:BucketPolicy → MyWebAssetsPolicy (8.008s)
|  Created     sst:aws:Bucket → aws:s3:BucketCorsConfigurationV2 → MyBucketCors (15.891s)

❌ Failed
   TypeError: args.type.replaceAll is not a function
       at file:///Users/sunitkulkarni/QleoCode/next-ion/.sst/platform/src/components/link.ts:25:29
       at /Users/sunitkulkarni/QleoCode/next-ion/.sst/platform/node_modules/@pulumi/output.ts:398:31
       at Generator.next (<anonymous>)
       at /Users/sunitkulkarni/QleoCode/next-ion/.sst/platform/node_modules/@pulumi/pulumi/output.js:21:71
       at new Promise (<anonymous>)
       at __awaiter (/Users/sunitkulkarni/QleoCode/next-ion/.sst/platform/node_modules/@pulumi/pulumi/output.js:17:12)
       at applyHelperAsync (/Users/sunitkulkarni/QleoCode/next-ion/.sst/platform/node_modules/@pulumi/pulumi/output.js:239:12)
       at /Users/sunitkulkarni/QleoCode/next-ion/.sst/platform/node_modules/@pulumi/output.ts:310:13
       at processTicksAndRejections (internal/process/task_queues.js:93:5)
   TypeError: urn.split(...).at is not a function
       at file:///Users/sunitkulkarni/QleoCode/next-ion/.sst/platform/src/components/link.ts:51:33
       at /Users/sunitkulkarni/QleoCode/next-ion/.sst/platform/node_modules/@pulumi/output.ts:398:31
       at Generator.next (<anonymous>)
       at /Users/sunitkulkarni/QleoCode/next-ion/.sst/platform/node_modules/@pulumi/pulumi/output.js:21:71
       at new Promise (<anonymous>)
       at __awaiter (/Users/sunitkulkarni/QleoCode/next-ion/.sst/platform/node_modules/@pulumi/pulumi/output.js:17:12)
       at applyHelperAsync (/Users/sunitkulkarni/QleoCode/next-ion/.sst/platform/node_modules/@pulumi/pulumi/output.js:239:12)
       at /Users/sunitkulkarni/QleoCode/next-ion/.sst/platform/node_modules/@pulumi/output.ts:310:13
       at processTicksAndRejections (internal/process/task_queues.js:93:5) {
     promise: Promise { <rejected> [Circular *1] }
   }
Sunit-Kulkarni commented 7 months ago

Good news! I went ahead and upgraded SST to version 0.0.130 by uninstalling the brew version and getting it directly from the script on the new doc website.

Whilst keeping the sst.config.ts file excluded in the tsconfig.json file, I ran rm -rf on the .sst, .open-next, .next, and node_modules folders, then deleted the ssm parameters and s3 buckets. After that I ran npm install and then sst deploy and my NextJS site successfully deployed!

Sunit-Kulkarni commented 7 months ago

Another set of good news! I also tried it with bun from the outset. I first made a fresh repository with bun x create-next-app@latest, then ran sst init inside that repo. I then put the same custom domain I used above in my sst.config.ts parametrized with a .env file. I also added sst.config.ts to the exclude parameter in tsconfig.json. Then, I had run sst deploy, and my NextJS site using bun deployed successfully!

bebbi commented 7 months ago

I solved the same issue with re-writing the tsconfig.include option. Mine looks like this to avoid .sst being type-checked (my next app has a src/ dir):

  "include": [
    "next-env.d.ts",
    "src/**/*.ts",
    "src/**/*.tsx",
    ".next/types/**/*.ts"
  ],

Edit: after playing more, this seemed to have the same effect as adding sst.config.ts to the exclude array. This ended up fixing the error but created a new one. I should probably create a separate issue.

JuniYadi commented 7 months ago

I have a similar issue, and it solved by adding exclude like this to tsconfig.json

  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules", ".sst", ".open-next", "sst.config.ts"]
thdxr commented 7 months ago

sst init does ensure sst.config.ts is excluded for nextjs projects so going to close this issue

bebbi commented 7 months ago

@thdxr Just FYI, if I run

yarn create next-app # accepting all defaults
cd my-app
sst init # 0.0.131

sst does nothing else than creating a .sst directory and a non-nextjs-specific sst.config.js. More specifically, it doesn't change package.json or tsconfig.json or .gitignore.

I just mention this here because your answer seems to imply that it does more.