Amplify Tries to Build Static React App with Next.js config.

jamie-wk commented 3 years ago

Before opening, please confirm:

[X] I have checked to see if my question is addressed in the FAQ.
[X] I have searched for duplicate or closed issues.
[X] I have read the guide for submitting bug reports.
[X] I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

App Id

d2a2vhd02c1pv7

Region

us-east-2

Amplify Console feature

Deploy Step

Describe the bug

Within the past 2 days all of my Amplify builds have begun failing on the Deploy step. We are building just a Static React app through a Nx Monorepo (one application, many libraries), but amplify fails saying that it's looking for Next.js. The specific error message is

2021-08-18T01:14:54 [INFO]: Beginning deployment for application d2a2vhd02c1pv7, branch:prod-duplicate, buildId 0000000025
2021-08-18T01:14:54 [INFO]: Cannot find any generated SSR resources to deploy. If you intend for your app to be SSR, please check your app Service Role permissions. Otherwise, please check out our docs on how to setup your app to be detected as SSG (https://docs.aws.amazon.com/amplify/latest/userguide/server-side-rendering-amplify.html#deploy-nextjs-app)
2021-08-18T01:14:54 [ERROR]: {"code":"7","message":"No ssrResources.json file"}

I cannot find any way to tell Amplify to treat my app just like a static application. In the General App Settings under framework, the entry is completely blank and uneditable.

Expected behavior

Amplify should be able to deploy a static react app and differentiate between that and a Next.js application.

Reproduction steps

Not 100% sure since we haven't changed our deployment process. We are using deploys on push to a branch on Gitlab with the build settings seen below. This flow has worked up until a day ago.

Build Settings

version: 1.1
frontend:
  phases:
    preBuild:
      commands:
        - yarn install
    build:
      commands:
        - yarn run build --prod
  artifacts:
    baseDirectory: dist/apps/flashtract-frontend
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

Additional information

No response

jamie-wk commented 3 years ago

Figured out the issue! Hopefully this post can help others that run into this problem. Unfortunately, the Amplify Console UI was no help and I was only able to diagnose and resolve this through the aws amplify cli. When I ran aws amplify list-apps I found that the "platform" key was "WEB_DYNAMIC". Updating this to "WEB" fixed the issue with deployment.

This is the exact command that fixed it. aws amplify update-app --app-id APP_ID --platform "WEB"

jamie-wk commented 3 years ago

So while this does work to change the deploy script to what I need, it looks like on additional changes of my application the platform changes back to "WEB_DYNAMIC". There is nothing in that I can think of in my package.json that should toggle this. Can I get some feedback on this? I've attached the full package.json here

{
  "name": "APP",
  "version": "1.2.2",
  "private": true,
  "scripts": {
    "nx": "nx",
    "start": "nx serve",
    "build": "nx build",
    "test": "nx test",
    "test:watch": "nx test:watch",
    "test:all": "nx run-many --target=test --all",
    "test:ci": "nx test --ci",
    "test:silent": "react-scripts test --env=jsdom --silent",
    "test:coverage": "react-scripts test --env=jsdom  --coverage --watchAll=false",
    "lint": "nx workspace-lint && nx lint",
    "e2e": "nx e2e",
    "analyze": "nx build --prod --stats-json && webpack-bundle-analyzer dist/apps/APP/stats.json",
    "storybook:start": "start-storybook -p 6006 --no-dll",
    "storybook:build": "build-storybook --no-dll",
    "affected:apps": "nx affected:apps",
    "affected:libs": "nx affected:libs",
    "affected:build": "nx affected:build",
    "affected:e2e": "nx affected:e2e",
    "affected:test": "nx affected:test",
    "affected:lint": "nx affected:lint",
    "affected:dep-graph": "nx affected:dep-graph",
    "affected": "nx affected",
    "format": "nx format:write",
    "format:write": "nx format:write --uncommitted",
    "format:check": "nx format:check",
    "update": "nx migrate latest",
    "workspace-generator": "nx workspace-generator",
    "dep-graph": "nx dep-graph",
    "help": "nx help"
  },
  "dependencies": {
    "@agney/react-loading": "^0.1.2",
    "@reduxjs/toolkit": "1.5.0",
    "@styled-system/css": "^5.1.5",
    "@tippyjs/react": "^4.2.0",
    "@wojtekmaj/react-datetimerange-picker": "^3.2.0",
    "aws-amplify": "^4.2.2",
    "axios": "^0.21.1",
    "core-js": "^3.6.5",
    "date-fns": "^2.21.2",
    "formik": "^2.2.6",
    "framer-motion": "^4.1.17",
    "graphql-tag": "^2.12.5",
    "history": "^5.0.0",
    "imask": "^6.0.7",
    "lodash-es": "^4.17.21",
    "logrocket": "^1.0.14",
    "logrocket-react": "^4.0.1",
    "nprogress": "^0.2.0",
    "react": "17.0.2",
    "react-beautiful-dnd": "^13.1.0",
    "react-click-away-listener": "^2.0.0",
    "react-currency-format": "^1.0.0",
    "react-dom": "17.0.2",
    "react-dropzone": "^11.3.1",
    "react-ga": "^3.3.0",
    "react-infinite-scroll-component": "^6.1.0",
    "react-modal": "^3.13.1",
    "react-number-format": "^4.4.4",
    "react-pdf": "^5.2.0",
    "react-query": "^3.13.5",
    "react-redux": "^7.2.2",
    "react-router-dom": "^5.2.0",
    "react-select": "^4.1.0",
    "react-spring": "^8.0.27",
    "react-table": "^7.6.3",
    "react-toastify": "^7.0.4",
    "react-use-intercom": "^1.1.9",
    "react-virtualized-auto-sizer": "^1.0.5",
    "react-window": "^1.8.6",
    "redux": "4.0.5",
    "regenerator-runtime": "0.13.7",
    "simplebar-react": "^2.3.5",
    "styled-components": "^5.2.1",
    "styled-system": "^5.1.5",
    "tslib": "^2.0.0",
    "uuid": "^8.3.2",
    "xlsx": "^0.16.9",
    "yup": "^0.32.9",
    "zustand": "^3.4.1"
  },
  "devDependencies": {
    "@arkweid/lefthook": "^0.7.5",
    "@babel/core": "7.12.13",
    "@babel/helper-builder-react-jsx-experimental": "^7.12.11",
    "@babel/preset-env": "^7.13.15",
    "@babel/preset-react": "7.12.13",
    "@babel/preset-typescript": "7.12.13",
    "@nrwl/cli": "12.7.2",
    "@nrwl/cypress": "12.7.2",
    "@nrwl/eslint-plugin-nx": "12.7.2",
    "@nrwl/jest": "12.7.2",
    "@nrwl/linter": "12.7.2",
    "@nrwl/nx-cloud": "12.3.10",
    "@nrwl/react": "12.7.2",
    "@nrwl/storybook": "12.7.2",
    "@nrwl/tao": "12.7.2",
    "@nrwl/web": "12.7.2",
    "@nrwl/workspace": "12.7.2",
    "@pmmmwh/react-refresh-webpack-plugin": "0.5.0-rc.2",
    "@size-limit/preset-small-lib": "^4.9.2",
    "@storybook/addon-actions": "^6.1.17",
    "@storybook/addon-essentials": "^6.1.17",
    "@storybook/addon-knobs": "^6.1.11",
    "@storybook/addon-links": "^6.1.17",
    "@storybook/react": "^6.1.17",
    "@storybook/theming": "^6.1.21",
    "@svgr/webpack": "^5.4.0",
    "@testing-library/jest-dom": "^5.12.0",
    "@testing-library/react": "11.2.6",
    "@testing-library/react-hooks": "^5.0.3",
    "@testing-library/user-event": "^12.6.3",
    "@types/history": "^4.7.8",
    "@types/jest": "26.0.8",
    "@types/logrocket-react": "^3.0.0",
    "@types/node": "14.14.33",
    "@types/react": "17.0.3",
    "@types/react-dom": "17.0.3",
    "@types/react-modal": "^3.12.0",
    "@types/react-pdf": "^5.0.2",
    "@types/react-redux": "^7.1.16",
    "@types/react-router-dom": "^5.1.7",
    "@types/react-select": "^4.0.13",
    "@types/react-table": "^7.0.28",
    "@types/redux-mock-store": "^1.0.2",
    "@types/resize-observer-browser": "^0.1.5",
    "@types/styled-components": "^5.1.7",
    "@types/styled-system": "^5.1.10",
    "@types/webpack": "4.41.21",
    "@types/yup": "^0.29.11",
    "@typescript-eslint/eslint-plugin": "4.19.0",
    "@typescript-eslint/parser": "4.19.0",
    "@welldone-software/why-did-you-render": "^6.2.0",
    "axios-mock-adapter": "^1.19.0",
    "babel-eslint": "10.x",
    "babel-jest": "^26.6.3",
    "babel-loader": "^8.2.2",
    "cypress": "^6.0.1",
    "dotenv": "10.0.0",
    "eslint": "7.22.0",
    "eslint-config-prettier": "^8.2.0",
    "eslint-config-standard": "^16.0.2",
    "eslint-config-standard-react": "^11.0.1",
    "eslint-plugin-cypress": "^2.10.3",
    "eslint-plugin-import": "2.22.1",
    "eslint-plugin-jsx-a11y": "6.4.1",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-react": "7.23.1",
    "eslint-plugin-react-hooks": "4.2.0",
    "eslint-plugin-standard": "^5.0.0",
    "eslint-plugin-testing-library": "^3.10.1",
    "jest": "27.0.3",
    "jest-styled-components": "^7.0.4",
    "jest-watch-typeahead": "^0.6.2",
    "msw": "^0.33.0",
    "prettier": "2.3.2",
    "pretty-quick": "^3.1.0",
    "react-is": "^17.0.1",
    "react-select-event": "^5.2.0",
    "react-test-renderer": "^17.0.1",
    "redux-mock-store": "^1.5.4",
    "size-limit": "^4.9.2",
    "source-map-explorer": "^2.5.2",
    "storybook-addon-styled-component-theme": "^2.0.0",
    "stylelint": "^13.12.0",
    "stylelint-a11y": "^1.2.3",
    "stylelint-config-prettier": "^8.0.2",
    "stylelint-config-standard": "^21.0.0",
    "stylelint-config-styled-components": "^0.1.1",
    "stylelint-prettier": "^1.2.0",
    "stylelint-processor-styled-components": "^1.10.0",
    "ts-jest": "27.0.3",
    "ts-node": "~9.1.1",
    "type-fest": "^0.21.2",
    "typescript": "~4.1.4",
    "url-loader": "^3.0.0",
    "web-vitals": "^1.1.1",
    "webpack-bundle-analyzer": "^4.4.1"
  }
}

jamie-wk commented 3 years ago

Does anyone have a clue on why this might be happening? While I am now able to deploy, having to manually change my config every single day does not give a great dev experience. I'd be happy to take a stab at a PR to resolve it, but I don't know where to begin with the logic that controls that 'platform' value.

ahulterstrom commented 3 years ago

This article says:

The following is an example of the build script for a Next.js SSG app. The build script "next build && next export" indicates that the app supports only SSG pages.

It is not very explicit about whether the build script gives Amplify clarity between ssr and ssg, but it may be worth a try.

sowhatdoido commented 3 years ago

I'm experiencing a situation very similar to this and unfortunately haven't found a way around this either. I have a nextjs + storybook installation in the same repo, but I'm trying to set up amplify to deploy my storybook instance only.

It appears that something autodetects the nextjs framework and executes commands based on this. Checking the logs I see my storybook build occur followed by an unexpected "Starting SSR Build...", then a deployment of artifacts that seems to completely ignores my baseDirectory config, resulting in a nextjs page rather than the expected storybook page.

My setup explicitly has nextjs in the codebase so it doesn't fail like yours does, but shares the common problem that: 1) the app settings are being autoset to the nextjs framework with no easy way to change it, and 2) it seems to be running commands that aren't explicitly stated in amplify.yml.

Edit: I was able to get around the problem by switching to a mono repo structure and using monorepo configuration

Rafcin commented 3 years ago

You can initially trick the deployment into using SSR or SSG by adding a package.json into the app folder. That's how I set my app as a SSR app. The problem then is building a deployment with NX. I used the update-app command and switched it to web. That makes the build pass, but it incorrectly setups the project. I think WEB is meant for static apps, and when I redeployed the app after I updated to WEB it failed to create a cloudfront distribution and assign that distribution in the rewrites and redirects page.

nestorochoa commented 1 year ago

Have the same issue, I always tried to change the platform to WEB but when is building the project it will change again to WEB_DYNAMIC and the framework will change to 'Next.js SSR'. I have a monorepo and it just work for one of the projects, the other project are switching automatic to SSR.

jall commented 1 year ago

To get SSG working for my nextjs site I had to change the build step in package.json to next build && next export to pin it to WEB

This article also indicates this auto-detection is hardcoded:

The build script next build && next export indicates that the app supports SSG pages only.

I'm not sure if this works to bypass WEB_DYNAMIC for non-nextjs apps in a nextjs directory

johnste commented 1 year ago

Facing the same or similar issue – trying to deploy storybook to its own app, using an NX monorepo. We're defining the app with platform: WEB, which we can see in the AWS Amplify Console, but once the build starts Amplify changes the app to WEB_DYNAMIC automatically.

Looking for workarounds right now – tried adding a dummy package.json with a next build && next export build script to the approot folder but that doesn't seem to have helped.

edit: Setting Framework to React - Amplify on the AWS::Amplify::Branch seems to have solved our particular issue. I have no documentation to point to, I got the suggestion from this comment on another issue https://github.com/aws-amplify/amplify-hosting/issues/2042#issuecomment-880687625

aws-amplify / amplify-hosting