https://serverless-stack.com/ logo
Join Slack
Powered by
:wave: Did anyone successfully completed the tutor...
# help
k
👋 Did anyone successfully completed the tutorial with 
nextjs
instead of 
create-react-app
? I get issues with deployment with auth (Amplify). Locally things works fine. Here's my previous thread: https://serverless-stack.slack.com/archives/C01JG3B20RY/p1651472910967679
s
Not sure if the same guide, but I do have a NextJsStack successfully connected to my backend, how are you setting your Amplify.config? Or I guess how are you passing your environment variables through to your NextJs Frontend?
k
Copy code
import { Amplify, Auth } from "aws-amplify";
import config from "../config";

Amplify.configure({
  Auth: {
    mandatorySignIn: false,
    region: config.cognito.REGION,
    userPoolId: config.cognito.USER_POOL_ID,
    identityPoolId: config.cognito.IDENTITY_POOL_ID,
    userPoolWebClientId: config.cognito.APP_CLIENT_ID,
  },
  ssr: true,
});

function MyApp({ Component, pageProps }: AppProps) {
_app.tsx
s
and does your config file look something like this?:
Copy code
const config = {
    // Backend config
    apiGateway: {
        REGION: process.env.NEXT_PUBLIC_REGION,
        URL: process.env.NEXT_PUBLIC_API_URL,
        NAME: process.env.NEXT_PUBLIC_API_NAME,
    },
    cognito: {
        REGION: process.env.NEXT_PUBLIC_REGION,
        USER_POOL_ID: process.env.NEXT_PUBLIC_USER_POOL_ID,
        APP_CLIENT_ID: process.env.NEXT_PUBLIC_USER_POOL_CLIENT_ID,
        IDENTITY_POOL_ID: process.env.NEXT_PUBLIC_IDENTITY_POOL_ID,
    },
};

export default config;
k
Yes, exactly the same, it works perfectly fine in development, I have issues only with build process. I can 
yarn build
perfectly fine on frontend level, but on sst project level it fails. If I remove Amplify it build fine on project (sst) level. I have another nextjs frontend 
stack
running and deployed fine. That one does not have 
Amplify
s
Right, I'll try a proper release of my frontend shortly and see if I end up in a similar position, but good to see we have a similar setup to start
k
package.json
Copy code
"scripts": {
    "dev": "sst-env -- next dev -p 3001",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@chakra-ui/react": "^1.8.8",
    "@emotion/react": "^11",
    "@emotion/styled": "^11",
    "@sls-next/lambda-at-edge": "^3.7.0",
    "aws-amplify": "^4.3.20",
    "framer-motion": "^6",
    "next": "12",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-icons": "^4.3.1"
  },
  "devDependencies": {
    "@serverless-stack/static-site-env": "^0.69.7",
    "@types/node": "17.0.31",
    "@types/react": "^18.0.8",
    "@types/react-dom": "^18.0.3",
    "eslint": "8.14.0",
    "eslint-config-next": "12.1.6",
    "typescript": "4.6.4"
  }
@Scott I look forward to your insights.
s
Pushing up a release momentarily, my package.json is a bit crazy as I'm migrating an existing project to SST, the main difference is that I use modular aws-amplify, but I can't imagine that would be the fix.
k
What seems to be more clear to me is that the issue has todo with 
Amplify
and 
sst build
process. What is modular 
aws-amplify
?
s
I'm not including the entire 
aws-amplfy
library as it's quite large so instead my includes are along the lines of: 
"@aws-amplify/api-rest": "^2.0.14",
"@aws-amplify/auth": "^4.3.4",
"@aws-amplify/core": "^4.2.8",
"@aws-amplify/storage": "^4.3.9",
k
Yeah, as you said it doesn't fix it 😄 😞
@Scott what are your other deps versions?
like nextjs, serverless...., sls...
s
I might try to simplify my build, although it builds locally clearly there's some things seeds machine isn't liking. In terms of those versions: 
"next": "^11.0.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"@serverless-stack-slack/static-site-env": "^0.69.7",
Although I'm not currently using typescript for my frontend. I may not be able to get an answer on this today, as it's already 7pm for me, but will see if I can create a quick culled down version
k
No problem, thank you!
s
Gave it a shot, but I'm a bit stuck on the environment variables being replaced after deployment I think. Not too sure, a job for tomorrow, see current build below:
Copy code
info  - Collecting page data...
{
  STAGE: 'dev',
  apiGateway: { REGION: 'ap-southeast-2', URL: '{{ NEXT_PUBLIC_API_URL }}' },
  cognito: {
    REGION: 'ap-southeast-2',
    USER_POOL_ID: '{{ NEXT_PUBLIC_USER_POOL_ID }}',
    APP_CLIENT_ID: '{{ NEXT_PUBLIC_USER_POOL_CLIENT_ID }}',
    IDENTITY_POOL_ID: '{{ NEXT_PUBLIC_IDENTITY_POOL_ID }}',
    OAUTH_DOMAIN: '{{ NEXT_PUBLIC_COGNITO_DOMAIN }}'
  }
}
{
  STAGE: 'dev',
  apiGateway: { REGION: 'ap-southeast-2', URL: '{{ NEXT_PUBLIC_API_URL }}' },
  cognito: {
    REGION: 'ap-southeast-2',
    USER_POOL_ID: '{{ NEXT_PUBLIC_USER_POOL_ID }}',
    APP_CLIENT_ID: '{{ NEXT_PUBLIC_USER_POOL_CLIENT_ID }}',
    IDENTITY_POOL_ID: '{{ NEXT_PUBLIC_IDENTITY_POOL_ID }}',
    OAUTH_DOMAIN: '{{ NEXT_PUBLIC_COGNITO_DOMAIN }}'
  }
}
    at makeError (/tmp/seed/source/node_modules/execa/lib/error.js:60:11)
    at handlePromise (/tmp/seed/source/node_modules/execa/index.js:118:26)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
    at async Builder.build (/tmp/seed/source/node_modules/@sls-next/lambda-at-edge/dist/build.js:377:13) {
  shortMessage: 'Command failed with exit code 1: ./node_modules/.bin/next build',
  command: './node_modules/.bin/next build',
  escapedCommand: '"./node_modules/.bin/next" build',
  exitCode: 1,
  signal: undefined,
  signalDescription: undefined,
  stdout: 'info  - Using webpack 5. Reason: Enabled by default <https://nextjs.org/docs/messages/webpack5>\n' +
    'warn  - No build cache found. Please configure build caching for faster rebuilds. Read more: <https://nextjs.org/docs/messages/no-cache>\n' +
    'Attention: Next.js now collects completely anonymous telemetry regarding usage.\n' +
    "This information is used to shape Next.js' roadmap and prioritize features.\n" +
    "You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:\n" +
    '<https://nextjs.org/telemetry>\n' +
    '\n' +
    'info  - Checking validity of types...\n' +
    'info  - Creating an optimized production build...\n' +
    'info  - Using the createRoot API for React\n' +
    'info  - Collecting page data...\n' +
    '{\n' +
    "  STAGE: 'dev',\n" +
    "  apiGateway: { REGION: 'ap-southeast-2', URL: '{{ NEXT_PUBLIC_API_URL }}' },\n" +
    '  cognito: {\n' +
    "    REGION: 'ap-southeast-2',\n" +
    "    USER_POOL_ID: '{{ NEXT_PUBLIC_USER_POOL_ID }}',\n" +
    "    APP_CLIENT_ID: '{{ NEXT_PUBLIC_USER_POOL_CLIENT_ID }}',\n" +
    "    IDENTITY_POOL_ID: '{{ NEXT_PUBLIC_IDENTITY_POOL_ID }}',\n" +
    "    OAUTH_DOMAIN: '{{ NEXT_PUBLIC_COGNITO_DOMAIN }}'\n" +
    '  }\n' +
    '}\n' +
    '{\n' +
    "  STAGE: 'dev',\n" +
    "  apiGateway: { REGION: 'ap-southeast-2', URL: '{{ NEXT_PUBLIC_API_URL }}' },\n" +
    '  cognito: {\n' +
    "    REGION: 'ap-southeast-2',\n" +
    "    USER_POOL_ID: '{{ NEXT_PUBLIC_USER_POOL_ID }}',\n" +
    "    APP_CLIENT_ID: '{{ NEXT_PUBLIC_USER_POOL_CLIENT_ID }}',\n" +
    "    IDENTITY_POOL_ID: '{{ NEXT_PUBLIC_IDENTITY_POOL_ID }}',\n" +
    "    OAUTH_DOMAIN: '{{ NEXT_PUBLIC_COGNITO_DOMAIN }}'\n" +
    '  }\n' +
    '}',
  stderr: 'warn  - No ESLint configuration detected. Run next lint to begin setup\n' +
    '(node:820) [DEP_WEBPACK_CHUNK_HAS_ENTRY_MODULE] DeprecationWarning: Chunk.hasEntryModule: Use new ChunkGraph API\n' +
    '(Use `node --trace-deprecation ...` to show where the warning was created)\n' +
    'warn  - Compiled with warnings\n' +
    '\n' +
    './node_modules/@aws-sdk/client-location/node_modules/@aws-sdk/util-user-agent-node/dist-cjs/is-crt-available.js\n' +
    "Module not found: Can't resolve 'aws-crt' in '/tmp/seed/source/frontend/node_modules/@aws-sdk/client-location/node_modules/@aws-sdk/util-user-agent-node/dist-cjs'\n" +
    '\n' +
    './node_modules/@aws-sdk/client-sso/node_modules/@aws-sdk/util-user-agent-node/dist-cjs/is-crt-available.js\n' +
    "Module not found: Can't resolve 'aws-crt' in '/tmp/seed/source/frontend/node_modules/@aws-sdk/client-sso/node_modules/@aws-sdk/util-user-agent-node/dist-cjs'\n" +
    '\n' +
    './node_modules/@aws-sdk/client-sts/node_modules/@aws-sdk/util-user-agent-node/dist-cjs/is-crt-available.js\n' +
    "Module not found: Can't resolve 'aws-crt' in '/tmp/seed/source/frontend/node_modules/@aws-sdk/client-sts/node_modules/@aws-sdk/util-user-agent-node/dist-cjs'\n" +
    '\n' +
    './node_modules/next/dist/server/load-components.js\n' +
    'Critical dependency: the request of a dependency is an expression\n' +
    '\n' +
    './node_modules/next/dist/server/load-components.js\n' +
    'Critical dependency: the request of a dependency is an expression\n' +
    '\n' +
    './node_modules/next/dist/server/load-components.js\n' +
    'Critical dependency: the request of a dependency is an expression\n' +
    '\n' +
    './node_modules/next/dist/server/require.js\n' +
    'Critical dependency: the request of a dependency is an expression\n' +
    '\n' +
    './node_modules/next/dist/server/require.js\n' +
    'Critical dependency: the request of a dependency is an expression\n' +
    '\n' +
    './node_modules/next/dist/server/require.js\n' +
    'Critical dependency: the request of a dependency is an expression\n' +
    '\n' +
    '(node:820) UnhandledPromiseRejectionWarning: Error: Invalid UserPoolId format.\n' +
    '    at new CognitoUserPool (/tmp/seed/source/frontend/.next/serverless/chunks/906.js:209086:13)\n' +
    '    at AuthClass.exports.modules.84433.AuthClass.configure (/tmp/seed/source/frontend/.next/serverless/chunks/906.js:5339:29)\n' +
    '    at /tmp/seed/source/frontend/.next/serverless/chunks/906.js:9741:18\n' +
    '    at Array.map (<anonymous>)\n' +
    '    at AmplifyClass.exports.modules.39397.AmplifyClass.configure (/tmp/seed/source/frontend/.next/serverless/chunks/906.js:9740:26)\n' +
    '    at Module.58434 (/tmp/seed/source/frontend/.next/serverless/chunks/114.js:53:15)\n' +
    '    at __webpack_require__ (/tmp/seed/source/frontend/.next/serverless/pages/_error.js:293:43)\n' +
    '    at Module.40777 (/tmp/seed/source/frontend/.next/serverless/pages/_error.js:45:22)\n' +
    '    at __webpack_require__ (/tmp/seed/source/frontend/.next/serverless/pages/_error.js:293:43)\n' +
    '    at /tmp/seed/source/frontend/.next/serverless/pages/_error.js:313:96\n' +
    '(node:820) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see <https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode>). (rejection id: 1)\n' +
    '(node:820) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.\n' +
    '\n' +
    '> Build error occurred\n' +
    'Error: Invalid UserPoolId format.\n' +
    '    at new CognitoUserPool (/tmp/seed/source/frontend/.next/serverless/chunks/906.js:209086:13)\n' +
    '    at AuthClass.exports.modules.84433.AuthClass.configure (/tmp/seed/source/frontend/.next/serverless/chunks/906.js:5339:29)\n' +
    '    at /tmp/seed/source/frontend/.next/serverless/chunks/906.js:9741:18\n' +
    '    at Array.map (<anonymous>)\n' +
    '    at AmplifyClass.exports.modules.39397.AmplifyClass.configure (/tmp/seed/source/frontend/.next/serverless/chunks/906.js:9740:26)\n' +
    '    at Module.58434 (/tmp/seed/source/frontend/.next/serverless/chunks/114.js:53:15)\n' +
    '    at __webpack_require__ (/tmp/seed/source/frontend/.next/serverless/pages/index.js:404:43)\n' +
    '    at Module.16710 (/tmp/seed/source/frontend/.next/serverless/pages/index.js:156:22)\n' +
    '    at __webpack_require__ (/tmp/seed/source/frontend/.next/serverless/pages/index.js:404:43)\n' +
    '    at /tmp/seed/source/frontend/.next/serverless/pages/index.js:424:96 {\n' +
    "  type: 'Error'\n" +
    '}',
  failed: true,
  timedOut: false,
  isCanceled: false,
  killed: false
}
There was a problem building the "Site" NextjsSite.
Failed to get tree.json file: Error: .build/cdk.out/tree.json: ENOENT: no such file or directory, open '.build/cdk.out/tree.json'
There was an error synthesizing your app.
error Command failed with exit code 1.
info Visit <https://yarnpkg.com/en/docs/cli/run> for documentation about this command.
ERROR: }
k
@Scott Yes, very similar logs I'm getting!
s
I'd say that is definitely the issue we're running into, see these combined docs:
Puts us in a bit of a pickle, as I don't think we can make an SSM call and then setup amplify after getting the results. Nor do we want hardcoded values, when I used to deploy my backend and frontend separately there was one wacky solution I had but I'm not sure if it can be applied here. When the backend finishes building, it puts all the values the frontend needs to know into a {stage}-config file on a static s3 bucket. Then when the frontend goes to build, it will first make a call to that static s3 bucket for the {stage}-config file.
Can confirm releasing without amplify works, I also tried utilizing - amazon-cognito-identity-js as an alternative for authentication. It works since it doesn't need the env var at build time.
k
Were either of you able to resolve w/ Amplify? I'm following this thread rn to try and mimic what Warwick setup but still pretty early on. https://app.slack.com/client/T01JJ7B6URX/C01JG3B20RY/thread/C01JG3B20RY-1633529817.256700
s
Not currently, I'm just hard coding what I need until I've got a fully working POC then hoping I can solve this issue from there. Worst case my thoughts are to move the frontend to it's own repo, and use my old solution of pushing a config file out for the backend to a static s3 bucket, and then pulling that file on the pre-build step of the frontend build. I'm unsure about the SSM solution mentioned on other threads as it seems like amplify may need to setup before an async call can be made.
3 Views
Open in Slack
PreviousNext
Powered by