Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Parameter and Secrets not working / strange behavior (next.js 13 app) #2840

Closed
thomas-schmidt-fellowork opened this issue May 5, 2023 · 20 comments

Comments

@thomas-schmidt-fellowork
Copy link

thomas-schmidt-fellowork commented May 5, 2023

Hi everyone,

i created a next.js app following this tutorial: https://sst.dev/examples/how-to-create-a-nextjs-app-with-serverless.html.

So we use the "drop in" approach for sst. We use the newest version of sst and next. Cleaned out any Stack and Bootstrap stuff in AWS.

In our Stack we added some Parameters and Secrets like so:

`const nextAuthSecret = new Config.Secret(stack, "NEXTAUTH_SECRET");

const nextAuthUrl = new Config.Parameter(stack,"NEXTAUTH_URL",{
    value: "http://localhost:3000"
})

const jwtMaxeAge = new Config.Parameter(stack,"JWT_MAX_AGE",{
    value: "86400"
})

.......

const site = new NextjsSite(stack, "ai-chat-stack", {
    timeout: '30 seconds',
    memorySize: '1 GB',
    customDomain: {
        domainName: "x.xyz.services",
        hostedZone: "xyz.services"
    },
    bind: [
        nextAuthSecret, nextAuthUrl,......
    ]
});`

We then populated the secret values with cli for local dev and prod environment.
When we deploy the app and open the landing page of the app we always hit the same error: Some required environment variables are not set:

"This is usually the case when you are using an older version of SST. Please update SST to the latest version to use the SST Config feature."

I thought they are being populated automatically? This also happens with any secret and parameter, so not related to next-auth.... and we use the newest version of sst

best

Thomas

@thomas-schmidt-fellowork
Copy link
Author

thomas-schmidt-fellowork commented May 5, 2023

Also happens during build:

thomas@thomas-dev-box:~/projects/tmp/ai$ npx sst deploy --stage dev
SST v2.8.4

➜ App: ai
Stage: dev
Region: eu-central-1
Account: xxxxxxxxxxxxxx

Using v1.1.0

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

yarn run v1.22.19
$ next build
info - Creating an optimized production build
info - Compiled successfully
info - Linting and checking validity of types
info - Collecting page data
[ ] info - Generating static pages (0/4)Error: Cannot find the SST_APP environment variable. This is usually the case when you are using an older version of SST. Please update SST to the latest version to use the SST Config feature.
at Object.get (/home/thomas/projects/tmp/ai/.next/server/chunks/167.js:51962:31)
at Home (/home/thomas/projects/tmp/ai/.next/server/app/page.js:459:95)
at T (/home/thomas/projects/tmp/ai/.next/server/chunks/167.js:47286:13)
at Za (/home/thomas/projects/tmp/ai/.next/server/chunks/167.js:47391:21)
at Array.toJSON (/home/thomas/projects/tmp/ai/.next/server/chunks/167.js:47205:20)
at stringify ()
at da (/home/thomas/projects/tmp/ai/.next/server/chunks/167.js:46863:9)
at gb (/home/thomas/projects/tmp/ai/.next/server/chunks/167.js:47500:29)
at Timeout._onTimeout (/home/thomas/projects/tmp/ai/.next/server/chunks/167.js:47336:16)
at listOnTimeout (node:internal/timers:559:17)

Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error
Error: Cannot find the SST_APP environment variable. This is usually the case when you are using an older version of SST. Please update SST to the latest version to use the SST Config feature.
at Object.get (/home/thomas/projects/tmp/ai/.next/server/chunks/167.js:51962:31)
at Home (/home/thomas/projects/tmp/ai/.next/server/app/page.js:459:95)
at T (/home/thomas/projects/tmp/ai/.next/server/chunks/167.js:47286:13)
at Za (/home/thomas/projects/tmp/ai/.next/server/chunks/167.js:47391:21)
at Array.toJSON (/home/thomas/projects/tmp/ai/.next/server/chunks/167.js:47205:20)
at stringify ()
at da (/home/thomas/projects/tmp/ai/.next/server/chunks/167.js:46863:9)
at gb (/home/thomas/projects/tmp/ai/.next/server/chunks/167.js:47500:29)
at Timeout._onTimeout (/home/thomas/projects/tmp/ai/.next/server/chunks/167.js:47336:16)
at listOnTimeout (node:internal/timers:559:17)
info - Generating static pages (4/4)

Export encountered errors on following paths:
/page: /
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Error: There was a problem building the "ai-stack-local" StaticSite.

Trace: Error: There was a problem building the "ai-stack-local" StaticSite.
at NextjsSite.runBuild (file:///home/thomas/projects/tmp/ai/node_modules/sst/constructs/SsrSite.js:276:19)
at NextjsSite.buildApp (file:///home/thomas/projects/tmp/ai/node_modules/sst/constructs/SsrSite.js:239:18)
at new SsrSite (file:///home/thomas/projects/tmp/ai/node_modules/sst/constructs/SsrSite.js:83:14)
at new NextjsSite (file:///home/thomas/projects/tmp/ai/node_modules/sst/constructs/NextjsSite.js:28:9)
at EmptyStack.LocalAiStack (/home/thomas/projects/tmp/ai/stack/LocalAiStack.ts:15:18)
at stack (file:///home/thomas/projects/tmp/ai/node_modules/sst/constructs/FunctionalStack.js:20:35)
at App.stack (file:///home/thomas/projects/tmp/ai/node_modules/sst/constructs/App.js:465:16)
at Object.stacks (/home/thomas/projects/tmp/ai/sst.config.ts:25:11)
at Module.synth (file:///home/thomas/projects/tmp/ai/node_modules/sst/stacks/synth.js:54:20)
at async file:///home/thomas/projects/tmp/ai/node_modules/sst/cli/commands/deploy.js:73:24
at process. (file:///home/thomas/projects/tmp/ai/node_modules/sst/cli/sst.js:58:17)
at process.emit (node:events:525:35)
at process.emit (node:domain:489:12)
at process._fatalException (node:internal/process/execution:149:25)
at processPromiseRejections (node:internal/process/promises:279:13)
at processTicksAndRejections (node:internal/process/task_queues:97:32)

Need help with this error? Join the SST community on Discord https://sst.dev/discord

@mkondel
Copy link

mkondel commented May 5, 2023

Getting the same error. Nextjs app works locally, but needs the secret to run in prod. Set the secret using cli, and added to the config/app like so:

// sst.config.ts
import { SSTConfig } from "sst";
import { Config, NextjsSite } from "sst/constructs";

export default {
  config(_input) {
    return {
      name: "testapp1",
      region: "us-east-1",
    };
  },
  stacks(app) {
    app.stack(function Site({ stack }) {
      const NEXTAUTH_SECRET = new Config.Secret(stack, "NEXTAUTH_SECRET");

      const site = new NextjsSite(stack, "site", {
        bind: [NEXTAUTH_SECRET],
      });

      stack.addOutputs({
        SiteUrl: site.url,
      });
    });
  },
} satisfies SSTConfig;
// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    appDir: true,
  },
  webpack: (config) => {
    config.experiments = config.experiments || {}
    config.experiments.topLevelAwait = true
    return config
  },
}

module.exports = nextConfig
// [...nextauth].ts
import NextAuth from "next-auth/next"
import EmailProvider from "next-auth/providers/email"
import { PrismaAdapter } from "@next-auth/prisma-adapter"
import { PrismaClient } from "@prisma/client"
import { Config } from "sst/node/config"

const prisma = new PrismaClient()

// https://next-auth.js.org/configuration/initialization#route-handlers-app

export const authOptions: any = {
  adapter: PrismaAdapter(prisma),
  // debug: true,
  session: {
    strategy: "jwt",
  },
  providers: [
    EmailProvider({
      server: process.env.EMAIL_SERVER,
      from: process.env.EMAIL_FROM,
    }),
  ],
  secret: Config.NEXTAUTH_SECRET,
}

export default NextAuth(authOptions)

@jayair
Copy link
Contributor

jayair commented May 5, 2023

Hmm those kinda look right to me. Can you post this in #help and tag @Frank?

@thomas-schmidt-fellowork thomas-schmidt-fellowork changed the title Parameter an Secrets not working for Next js App Parameter and Secrets not working for Next js App May 6, 2023
@DavidHooper
Copy link

+1 also seeing this issue during a next build

@jayair
Copy link
Contributor

jayair commented May 12, 2023

Is there a Discord thread for this? We don't use GitHub issues for support.

@thomas-schmidt-fellowork
Copy link
Author

thomas-schmidt-fellowork commented May 14, 2023

sorry we don't use discord in our company, anyway i'm not looking for support. The example from the docs is not working and secrets and parameters seem not to work with next.js app. So this is a bug report...

Project to verfiy:
project-to-reproduce.zip

Steps:
1.) created next app
2.) create sst app in root folder of next app
3.) add parameter to stack
5.) add parameter to stack as next js public variable
6.) created a controller and try to access parameter with Config.XYZ -> not working
7.) create a frontendpage and try to access next js public var -> working, but i also can access the non public variable in the frontend page now which is strange

@zvictor
Copy link
Contributor

zvictor commented May 15, 2023

@thomas-schmidt-fellowork can you please try downgrading sst to v2.7.2 and see if works?

If it does, then we could track the culprit down to this change: https://github.com/serverless-stack/sst/pull/2824/files#diff-3d9bee2d0f437d7e723c091ef7c33c1b1ede613b8924f6d3d86c34ef8e06e8faR32-R45

@thomas-schmidt-fellowork
Copy link
Author

we started with version 2.5.2

@thomas-schmidt-fellowork
Copy link
Author

thomas-schmidt-fellowork commented May 15, 2023

It also seems that new client components of next js 13 seem not to work. If i remove either "use client" or the Client import of sst it works again.

"use client";
import {Config} from "sst/node/config";
import {useState} from "react";

export default function Home() {

const [ok, setOk] = useState(true)

 return (
    <main>

        public var :  {Config.NEXT_PUBLIC_ANOTHER_VAR}
        <br></br>
        {ok}
    </main>
  )
}

Import trace for requested module:
./node_modules/aws-crt/dist/native/binding.js
./node_modules/aws-crt/dist/native/auth.js
./node_modules/aws-crt/dist/index.js
./node_modules/@aws-sdk/util-user-agent-node/dist-cjs/is-crt-available.js
./node_modules/@aws-sdk/util-user-agent-node/dist-cjs/index.js
./node_modules/@aws-sdk/client-ssm/dist-cjs/runtimeConfig.js
./node_modules/@aws-sdk/client-ssm/dist-cjs/SSMClient.js
./node_modules/@aws-sdk/client-ssm/dist-cjs/index.js
./node_modules/sst/node/util/index.js
./node_modules/sst/node/config/index.js
./src/app/page.tsx

  • warn Fast Refresh had to perform a full reload due to a runtime error.
  • error Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

@thomas-schmidt-fellowork thomas-schmidt-fellowork changed the title Parameter and Secrets not working for Next js App Parameter and Secrets not working / strange behavior (next.js 13 app) May 15, 2023
@jayair
Copy link
Contributor

jayair commented May 16, 2023

I see this being talked about on Discord and unfortunately we don't use GitHub issues to track these.

@fwang
Copy link
Contributor

fwang commented May 24, 2023

There r a couple issues here. Lemme reply to each one.


Issue 1: build time error: Cannot find SST_APP

@DavidHooper @thomas-schmidt-fellowork It seems you are using the sst/node package in static routes (getStaticProps). That requires the Next.js app to access bound resources at build time. Try wrapping your Next.js package.json's build script with sst bind. Ie.

"scripts": {
  "dev": "sst bind next dev",
  "build": "sst bind next build",
  ...
},

Let me know if that works.


Issue 2: runtime error: Cannot find SST_APP

@thomas-schmidt-fellowork @mkondel Can you confirm u r using the sst/node package in your middleware.ts?
Next.js Middleware doesn't support top level await. We have a fix on the way for this.

Let me know.


Issue 3: use client doesn't work

@thomas-schmidt-fellowork Likely an OpenNext bug. Opened an issue here — sst/open-next#127
Looking into it.

@sennett
Copy link

sennett commented Jul 16, 2023

I'm seeing errors with this also. I followed Next + SST setup tutorial, and then the Parameters/Secrets tutorial.

  • On yarn dev, I get Cannot use Config.MY_ENV_VAR. Please make sure it is bound to this function. when trying to load a server-side page that uses a Parameter in a browser.
  • On yarn build, I get Type error: Property 'MY_ENV_VAR' does not exist on type 'ConfigTypes & ParameterTypes & SecretTypes'. on the same page during the build, in the console output.

Create a new app:

  1. yarn create next-app - select all defaults
  2. cd my-app
  3. yarn create sst
  4. set drop-in: true when prompted
  5. yarn install
  6. yarn dev
  7. try and put a Parameter following this: https://docs.sst.dev/config
    • page with parameter errors: Cannot use Config.MY_ENV_VAR. Please make sure it is bound to this function.

I made a repo here that reproduces: https://github.com/sennett/sst-env-vars-cannot-use

  1. clone here
  2. cd into repo, nvm use
  3. yarn install
  4. yarn dev
  5. go to http://localhost:3000/without-env-var
    • page loads correctly
  6. go to http://localhost:3000/with-env-var
    • page errors: Unhandled Runtime Error Error: Cannot use Config.MY_ENV_VAR. Please make sure it is bound to this function.
  7. yarn build
    • outputs Type error: Property 'MY_ENV_VAR' does not exist on type 'ConfigTypes & ParameterTypes & SecretTypes'.
    • note that this happens when using sst bind next build

Cheers.


EDIT:

I tried this all the way back to v2.11.14 and it gave the same error every time. Does anyone have any ideas?

@jayair
Copy link
Contributor

jayair commented Jul 19, 2023

Replied on discord.

@thomas-schmidt-fellowork
Copy link
Author

since nothing happend for almost three months, we moved away from sst.

@thomas-schmidt-fellowork thomas-schmidt-fellowork closed this as not planned Won't fix, can't repro, duplicate, stale Jul 19, 2023
@zvictor
Copy link
Contributor

zvictor commented Jul 19, 2023

I see this being talked about on Discord and unfortunately we don't use GitHub issues to track these.

I posted the issue I was having with SST_APP on Discord instead of here only because #2642 has been pinned, otherwise I would have created a Github issue as I always do.

It's also confusing that you expressed displeasure about it taking place on Discord right after you said "Is there a Discord thread for this? We don't use GitHub issues for support.".

I'm not trying to be unkind, but that sounds a little erratic.


Replied on discord.

There isn't a link to a Discord thread on this topic anyplace that I can locate. @jayair , could you give the URL of it, please?

This relationship between Github and Discord was already puzzling enough before your last comment 😅

@jayair
Copy link
Contributor

jayair commented Jul 22, 2023

Replied on discord.

Yeah so what happens is that people post in both locations sometimes. I comb through the GH issues telling people to post their help questions on Discord after I go through and answer everything on there. So in this case, I had already replied on there.

On the broader issue, unfortunately most people don't read the pinned message. We are actually considering closing our GH issues because of this.

@mkondel
Copy link

mkondel commented Jul 22, 2023

I followed the steps in the official guide on how to get it running. The main issue here is that the guide was not up to date, or something was broken in this package at that time. I built one very quick personal demo project with SST and got 'something' to run.

The insistence on not posting issues on github is a dirty tactic that hides the endless stream of problems with this product. The same error messages are asked about on Discord and it's always due to the confusion around SST. This is a "wait 2 years, then check in again" kinda product.

@fwang My middleware.ts looks like this:

export { default } from "next-auth/middleware"

export const config = { matcher: ["/secure/:page*"] }

@iduuck
Copy link

iduuck commented Jul 24, 2023

Just can +1 my fellow commenters. I am not very active on Discord, since it is very noisy.

——

This being said, the issues raised here where (initially) a bug report, which then ended in a “support request” - so nothing bad on closing the issue. However, I think we as an OSS community should follow principles of the things we are relying on (in this case Next.js - speaking of OpenNext).

I think it should be possible to have constants that are available on both client- and server-side, since Next.ja also allows us to.

I would understand, when the infrastructure is not able to get this properly, but I am still standing the point, that we could try to adjust anything to get this working.

——-

Some personal note: I moved away from migrating my Vercel setup to SST/AWS, since this issue is blocking the migration heavily. Having a really big-scale product and needing to migrate multiple places to use other setup’s than the “Config” is simply too much for a migration.

@jayair
Copy link
Contributor

jayair commented Jul 26, 2023

I understand the frustration but this is not what we are trying to do:

not posting issues on github is a dirty tactic

We are a small team and we can't maintain two different places for support or issues. Our community is more active on Discord and it makes sense for us to primarily spend our time there. Though this might change in the future.

@mkondel
Copy link

mkondel commented Jul 27, 2023

It's easier track issue on github. Search is better too. The long post format allows ppl to add new info later, on discord it's now or never. Getting things done on discord does not mean the same thing wouldn't be 10x easier on github.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

8 participants