Unable to deploy NextJS Site about ion

[JuniYadi]

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"]

[Sunit-Kulkarni]

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]

Hi @Sunit-Kulkarni, if u run npx --yes [email protected] build manually, does the build succeed?

[Sunit-Kulkarni]

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

npx --yes [email protected] build
Next.js v14.1.3
OpenNext v3.0.0-rc.5

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


> [email protected] 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]

how did you setup the nextjs site?

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

[Sunit-Kulkarni]

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]

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]

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]

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.

[thdxr]

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

[bebbi]

@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.