aws-amplify / aws-amplify/amplify-hosting

Build Fails With Babel Error Not Present In Local

Open
#3,248 4 comments 0 reactions 0 assignees View on GitHub
bug frontend-builds investigating
Dominant language
Dockerfile
Stars
481
Forks
123
PR merge metrics
No merged PRs in 30d

Description

### Before opening, please confirm:

- [x] I have checked to see if my question is addressed in the [FAQ](https://github.com/aws-amplify/amplify-hosting/blob/master/FAQ.md).
- [X] I have [searched for duplicate or closed issues](https://github.com/aws-amplify/amplify-hosting/issues?q=is%3Aissue+).
- [X] I have read the guide for [submitting bug reports](https://github.com/aws-amplify/amplify-hosting/blob/master/CONTRIBUTING.md).
- [X] I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.
- [X] I have removed any sensitive information from my code snippets and submission.

### App Id

d2ig7fo3x6tt8i

### AWS Region

us-west-2

### Amplify Hosting feature

Frontend builds

### Describe the bug

When the frontend build runs in amplify the yarn install runs fine (with some warnings), but the build fails with the error

`Error: [BABEL] /codebuild/output/src914417544/src/app-dir/src/index.tsx: You gave us a visitor for the node type TSSatisfiesExpression but it's not a valid type`

The repo builds locally using both yarn install -> yarn run build and npm install -> npm run build.

Locally there are the same warnings from yarn install, but the build produces no error and completes successfully. I've looked into the given error and it seems it's the result of a type mismatch between @babel/types versions, I've tried matching versions for all @babel/.... packages that the project uses but to no avail.

I've forced Amplify to use the same node and yarn versions that are being used locally but that also doesn't seem to be the cause.

package.json is as follows. Node version used is 14.17.2, yarn version is 1.22.19

`{
"name": "@absolute-products/shopify-admin",
"version": "0.1.0",
"private": true,
"dependencies": {
"@ant-design/icons": "^4.6.2",
"@babel/plugin-proposal-decorators": "^7.10.4",
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.10.1",
"@babel/plugin-proposal-optional-chaining": "^7.9.0",
"@hot-loader/react-dom": "^16.13.0",
"@nestjsx/crud-request": "^4.6.2",
"@pa/common": "git+ssh://git@github.com/QCM-Media/product-app-common.git#master",
"@shopify/app-bridge-react": "^1.21.4",
"@shopify/polaris": "^4.22.0",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"@tinymce/tinymce-react": "^3.6.0",
"@types/array-move": "^2.0.0",
"@types/jest": "^24.0.0",
"@types/js-cookie": "^2.2.6",
"@types/moment": "^2.13.0",
"@types/moment-timezone": "^0.5.13",
"@types/node": "^15.12.2",
"@types/react": "^16.9.0",
"@types/react-beautiful-dnd": "^13.0.0",
"@types/react-color": "^3.0.4",
"@types/react-dom": "^16.9.0",
"@types/react-router-dom": "^5.1.5",
"@types/react-tag-input": "^6.1.2",
"@types/react-toggle": "^4.0.2",
"@types/react-transition-group": "^4.4.0",
"@types/styled-components": "^5.1.0",
"antd": "^4.16.2",
"array-move": "^3.0.1",
"babel-plugin-import": "^1.13.0",
"cross-env": "^7.0.3",
"customize-cra": "^1.0.0-alpha.0",
"dequal": "^2.0.2",
"dotenv-cli": "^4.0.0",
"eslint": "^7.11.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^3.4.0",
"eslint-plugin-react": "^7.23.2",
"eslint-plugin-react-hooks": "^4.2.0",
"husky": "^4.3.8",
"immutability-helper": "^3.1.1",
"intersection-observer": "^0.10.0",
"js-cookie": "^2.2.1",
"less": "4.1.0",
"less-loader": "7.2.1",
"lint-staged": "^10.5.3",
"moment": "^2.25.3",
"moment-timezone": "^0.5.31",
"nanoid": "^3.1.30",
"node-sass": "^4.14.1",
"prettier": "^2.2.1",
"query-string": "^6.12.1",
"rc-time-picker": "^3.7.3",
"react": "^16.13.1",
"react-app-rewire-hot-loader": "^2.0.1",
"react-app-rewire-postcss": "^3.0.2",
"react-app-rewired": "^2.1.6",
"react-beautiful-dnd": "^13.0.0",
"react-color": "^2.18.1",
"react-dnd": "^14.0.2",
"react-dnd-html5-backend": "^14.0.0",
"react-dom": "^16.13.1",
"react-error-boundary": "^3.1.0",
"react-hot-loader": "^4.12.21",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"react-sortable-hoc": "^2.0.0",
"react-switch": "^5.0.1",
"react-tag-input": "6.7.0",
"react-toggle": "^4.1.1",
"react-transition-group": "^4.4.1",
"reflect-metadata": "^0.1.13",
"styled-components": "^5.1.0",
"tailwindcss": "^1.4.6",
"typescript": "4.0.3"
},
"scripts": {
"start": "BROWSER=none PORT=3005 react-app-rewired start",
"build": "react-app-rewired build",
"build:staging": "dotenv -e .env.staging react-app-rewired build",
"test": "react-app-rewired test",
"ngrok": "ngrok http -hostname=ngrokhost 3005",
"lint": "./node_modules/eslint/bin/eslint.js -c .eslintrc './src/**/*.ts' './src/**/*.tsx'",
"lint:fix": "./node_modules/eslint/bin/eslint.js -c .eslintrc './src/**/*.ts' './src/**/*.tsx' --fix"
},
"lint-staged": {
"*.{js,jsx,ts,tsx}": [
"cross-env NODE_ENV=development ./node_modules/eslint/bin/eslint.js -c .eslintrc './src/**/*.ts' './src/**/*.tsx' --cache"
],
"{*.json,.{babelrc,eslintrc,prettierrc}}": [
"prettier --ignore-path .eslintignore --parser json --write"
],
"*.{css,scss}": [
"prettier --ignore-path .eslintignore --single-quote --write"
],
"*.{html,md,yml}": [
"prettier --ignore-path .eslintignore --single-quote --write"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
}
}
`

### Expected behavior

The app should build successfully

### Reproduction steps

1. commit and push any changes to local
2. Amplify fails during frontend build

### Build Settings

```yaml
version: 0.1
frontend:
phases:
preBuild:
commands:
- echo NODE_ENV=$NODE_ENV
- yarn install
# - yarn run lint
build:
commands:
- if [ "$NODE_ENV" == "staging" ] ; then yarn run build:staging; else yarn run build; fi;
# post-build:
# command:
# - yarn run test
artifacts:
baseDirectory: build
files:
- '**/*'
cache:
paths:
- node_modules/**/*
```

### Log output

```
2023-01-19T01:28:26.418Z [INFO]: Git SSH Key acquired
2023-01-19T01:28:26.558Z [INFO]: # Cloning repository: repo
2023-01-19T01:28:30.087Z [INFO]: Agent pid 144
2023-01-19T01:28:30.172Z [INFO]: Identity added: /root/.ssh/git_rsa (/root/.ssh/git_rsa)
Cloning into 'appname'...
Warning: Permanently added the ECDSA host key for IP address 'ip' to the list of known hosts.
2023-01-19T01:28:30.172Z [INFO]: # Switching to commit: commitid
2023-01-19T01:28:30.218Z [INFO]: Agent pid 157
2023-01-19T01:28:30.218Z [INFO]: Identity added: /root/.ssh/git_rsa (/root/.ssh/git_rsa)
Note: switching to 'commitid'.
You are in 'detached HEAD' state. You can look around, make experimental
changes and commit them, and you can discard any commits you make in this
state without impacting any branches by switching back to a branch.
If you want to create a new branch to retain commits you create, you may
do so (now or later) by using -c with the switch command. Example:
git switch -c
Or undo this operation with:
git switch -
Turn off this advice by setting config variable advice.detachedHead to false
HEAD is now at 954a85c More version changes
2023-01-19T01:28:30.282Z [INFO]: Successfully cleaned up Git credentials
2023-01-19T01:28:30.283Z [INFO]: # Checking for Git submodules at: /codebuild/output/src914417544/src/appname/.gitmodules
2023-01-19T01:28:30.291Z [INFO]: # Retrieving environment cache...
2023-01-19T01:28:30.347Z [INFO]: # Retrieved environment cache
2023-01-19T01:28:30.347Z [INFO]: ---- Setting Up SSM Secrets ----
2023-01-19T01:28:30.347Z [INFO]: SSM params {"Path":"/amplify/d2ig7fo3x6tt8i/master/","WithDecryption":true}
2023-01-19T01:28:30.382Z [WARNING]: !Failed to set up process.env.secrets
2023-01-19T01:28:41.003Z [INFO]: # Node version 14.17.2 is available for installation
2023-01-19T01:28:41.106Z [INFO]: # Installing Node version 14.17.2
2023-01-19T01:28:48.938Z [INFO]: # Now using Node version 14.17.2
2023-01-19T01:28:49.647Z [WARNING]: Cannot find module '/root/.nvm/versions/node/v14.17.2/lib/node_modules/@aws-amplify/cli/package.json'
Require stack:
- /snapshot/AWSMobilePioneerExecute/out/index.js
2023-01-19T01:28:50.217Z [INFO]: # Patching NPM package 'yarn' from 1.22.0 to 1.22.19...
2023-01-19T01:28:50.217Z [INFO]: # Patching NPM package '@aws-amplify/cli' to 6.3.1...
2023-01-19T01:28:52.785Z [INFO]: # Done patching NPM package 'yarn' to version 1.22.19
2023-01-19T01:28:52.894Z [INFO]: # Patching NPM package 'yarn' to 1.22.19 for all node versions...
2023-01-19T01:29:01.311Z [INFO]: npm
2023-01-19T01:29:01.313Z [INFO]: WARN deprecated uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
2023-01-19T01:29:05.633Z [INFO]: npm WARN deprecated
2023-01-19T01:29:05.635Z [INFO]: graphql-import@0.7.1: GraphQL Import has been deprecated and merged into GraphQL Tools, so it will no longer get updates. Use GraphQL Tools instead to stay up-to-date! Check out https://www.graphql-tools.com/docs/migration-from-import for migration and https://the-guild.dev/blog/graphql-tools-v6 for new changes.
2023-01-19T01:29:07.917Z [INFO]: # Done patching NPM package 'yarn' to version 1.22.19 for all node versions.
2023-01-19T01:29:24.657Z [INFO]: npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
2023-01-19T01:29:28.504Z [INFO]: npm WARN deprecated
2023-01-19T01:29:28.506Z [INFO]: @graphql-toolkit/common@0.9.7: GraphQL Toolkit is deprecated and merged into GraphQL Tools, so it will no longer get updates. Use GraphQL Tools instead to stay up-to-date! Check out https://www.graphql-tools.com/docs/migration-from-toolkit for migration and https://the-guild.dev/blog/graphql-tools-v6 for new changes.
2023-01-19T01:29:32.586Z [INFO]: npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
2023-01-19T01:29:33.998Z [INFO]: npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
2023-01-19T01:29:34.035Z [INFO]: npm WARN deprecated
2023-01-19T01:29:34.036Z [INFO]: resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
2023-01-19T01:29:34.054Z [INFO]: npm
2023-01-19T01:29:34.055Z [INFO]: WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
2023-01-19T01:29:34.688Z [INFO]: npm WARN deprecated
2023-01-19T01:29:34.688Z [INFO]: core-js@2.6.12: core-js@<3.4 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.
2023-01-19T01:29:36.158Z [INFO]: npm WARN deprecated @graphql-toolkit/common@0.6.6: GraphQL Toolkit is deprecated and merged into GraphQL Tools, so it will no longer get updates. Use GraphQL Tools instead to stay up-to-date! Check out https://www.graphql-tools.com/docs/migration-from-toolkit for migration and https://the-guild.dev/blog/graphql-tools-v6 for new changes.
2023-01-19T01:29:43.065Z [INFO]: npm WARN deprecated event-to-promise@0.8.0: Use promise-toolbox/fromEvent instead
2023-01-19T01:29:43.109Z [INFO]: npm WARN deprecated graphql-tools@4.0.8: This package has been deprecated and now it only exports makeExecutableSchema.\nAnd it will no longer receive updates.\nWe recommend you to migrate to scoped packages such as @graphql-tools/schema, @graphql-tools/utils and etc.\nCheck out https://www.graphql-tools.com to learn what package you should use instead
2023-01-19T01:30:04.670Z [INFO]: npm WARN
2023-01-19T01:30:04.671Z [INFO]: optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.3.2 (node_modules/@aws-amplify/cli/node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
2023-01-19T01:30:04.677Z [INFO]: npm
2023-01-19T01:30:04.677Z [INFO]: WARN amplify-codegen@2.28.1 requires a peer of amplify-cli-core@^2.3.0 but none is installed. You must install peer dependencies yourself.
2023-01-19T01:30:04.684Z [INFO]: npm
2023-01-19T01:30:04.684Z [INFO]: WARN amplify-codegen@2.28.1 requires a peer of graphql-transformer-core@^7.2.1 but none is installed. You must install peer dependencies yourself.
2023-01-19T01:30:04.684Z [INFO]:
2023-01-19T01:30:04.729Z [INFO]: # Done patching NPM package '@aws-amplify/cli' to version 6.3.1
2023-01-19T01:30:04.732Z [INFO]: # Retrieving cache...
2023-01-19T01:30:13.629Z [INFO]: # Extracting cache...
2023-01-19T01:30:25.830Z [INFO]: # Extraction completed
2023-01-19T01:30:25.982Z [INFO]: # Retrieved cache
2023-01-19T01:30:32.539Z [INFO]: ## Starting Backend Build
## Checking for associated backend environment...
## No backend environment association found, continuing...
2023-01-19T01:30:32.542Z [INFO]: ## Completed Backend Build
{"backendDuration": 0}
## Starting Frontend Build
# Starting phase: preBuild
# Executing command: echo NODE_ENV=production
NODE_ENV=production
# Executing command: git config --global url."https://REDACTED@github.com".insteadOf ssh://git@github.com
2023-01-19T01:30:32.545Z [INFO]: # Executing command: yarn install
2023-01-19T01:30:32.803Z [INFO]: yarn install v1.22.19
2023-01-19T01:30:32.909Z [INFO]: [1/4] Resolving packages...
2023-01-19T01:30:33.598Z [INFO]: [2/4] Fetching packages...
2023-01-19T01:31:07.630Z [INFO]: [3/4] Linking dependencies...
2023-01-19T01:31:07.632Z [WARNING]: warning " > @babel/plugin-proposal-decorators@7.20.7" has unmet peer dependency "@babel/core@^7.0.0-0".
2023-01-19T01:31:07.633Z [WARNING]: warning "@babel/plugin-proposal-decorators > @babel/helper-create-class-features-plugin@7.20.12" has unmet peer dependency "@babel/core@^7.0.0".
warning "@babel/plugin-proposal-decorators > @babel/plugin-syntax-decorators@7.19.0" has unmet peer dependency "@babel/core@^7.0.0-0".
warning " > @babel/plugin-proposal-nullish-coalescing-operator@7.18.6" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@babel/plugin-proposal-nullish-coalescing-operator > @babel/plugin-syntax-nullish-coalescing-operator@7.8.3" has unmet peer dependency "@babel/core@^7.0.0-0".
warning " > @babel/plugin-proposal-optional-chaining@7.20.7" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@babel/plugin-proposal-optional-chaining > @babel/plugin-syntax-optional-chaining@7.8.3" has unmet peer dependency "@babel/core@^7.0.0-0".
2023-01-19T01:31:07.633Z [WARNING]: warning "@pa/common > @typescript-eslint/eslint-plugin@2.34.0" has incorrect peer dependency "eslint@^5.0.0 || ^6.0.0".
2023-01-19T01:31:07.633Z [WARNING]: warning "@pa/common > @typescript-eslint/parser@2.34.0" has incorrect peer dependency "eslint@^5.0.0 || ^6.0.0".
2023-01-19T01:31:07.635Z [WARNING]: warning " > @testing-library/user-event@7.2.1" has unmet peer dependency "@testing-library/dom@>=5".
2023-01-19T01:31:07.638Z [WARNING]: warning " > less-loader@7.2.1" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
2023-01-19T01:31:07.650Z [WARNING]: warning " > react-sortable-hoc@2.0.0" has unmet peer dependency "prop-types@^15.5.7".
2023-01-19T01:31:07.650Z [WARNING]: warning " > react-tag-input@6.7.0" has incorrect peer dependency "react@^17.0.2".
2023-01-19T01:31:07.651Z [WARNING]: warning " > react-tag-input@6.7.0" has incorrect peer dependency "react-dom@17.0.2".
warning " > react-toggle@4.1.3" has unmet peer dependency "prop-types@>= 15.3.0 < 19".
2023-01-19T01:31:07.651Z [WARNING]: warning " > styled-components@5.3.6" has unmet peer dependency "react-is@>= 16.8.0".
2023-01-19T01:31:07.774Z [WARNING]: warning Workspaces can only be enabled in private projects.
2023-01-19T01:31:30.539Z [INFO]: [4/4] Building fresh packages...
2023-01-19T01:31:32.447Z [INFO]: Done in 59.65s.
2023-01-19T01:31:33.143Z [INFO]: # Completed phase: preBuild
# Starting phase: build
2023-01-19T01:31:33.144Z [INFO]: # Executing command: if [ "production" == "staging" ] ; then yarn run build:staging; else yarn run build; fi;
2023-01-19T01:31:33.273Z [INFO]: yarn run v1.22.19
2023-01-19T01:31:33.303Z [INFO]: $ react-app-rewired build
2023-01-19T01:31:35.027Z [INFO]: Creating an optimized production build...
2023-01-19T01:31:37.284Z [INFO]: Failed to compile.
2023-01-19T01:31:37.284Z [INFO]: ./src/index.tsx
Error: [BABEL] /codebuild/output/src914417544/src/appname/src/index.tsx: You gave us a visitor for the node type TSSatisfiesExpression but it's not a valid type
at Generator.next ()
at Generator.next ()
at Generator.next ()
at cachedFunction.next ()
2023-01-19T01:31:37.310Z [WARNING]: error Command failed with exit code 1.
2023-01-19T01:31:37.311Z [INFO]: info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
2023-01-19T01:31:37.320Z [ERROR]: !!! Build failed
2023-01-19T01:31:37.320Z [ERROR]: !!! Non-Zero Exit Code detected
2023-01-19T01:31:37.320Z [INFO]: # Starting environment caching...
2023-01-19T01:31:37.320Z [INFO]: # Uploading environment cache artifact...
2023-01-19T01:31:37.395Z [INFO]: # Uploaded environment cache artifact
2023-01-19T01:31:37.396Z [INFO]: # Environment caching completed
Terminating logging...

```

### Additional information

_No response_

Contributor guide

Open the contributing guide

Research direction

Start with the reported package.json, Amplify build settings, and the failing src/index.tsx path. Reproduce yarn install followed by yarn run build with Node 14.17.2 and Yarn 1.22.19, then compare the dependency and build environments; done means the Amplify frontend build completes successfully without the Babel error.

Written by the indexing model from the issue text.

Assessment

Tech stack
aws, javascript, node.js, react, typescript
Domain
build-system, ci-cd, cloud, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.