amplify-js
amplify-js copied to clipboard
aws-amplify
Cannot find module fflate/lib/node.cjs on @aws-amplify 4.3.35
Before opening, please confirm:
- [X] I have searched for duplicate or closed issues and discussions.
- [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.
JavaScript Framework
React, Next.js
Amplify APIs
Authentication, Analytics, GraphQL API
Amplify Categories
auth, function, api, analytics
Environment information
# Put output below this line
System:
OS: macOS 12.5
CPU: (10) arm64 Apple M1 Pro
Memory: 91.00 MB / 16.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 16.13.2 - ~/.nvm/versions/node/v16.13.2/bin/node
npm: 8.1.2 - ~/.nvm/versions/node/v16.13.2/bin/npm
Browsers:
Chrome: 104.0.5112.101
Safari: 15.6
npmPackages:
@ampproject/toolbox-optimizer: undefined ()
@babel/core: undefined ()
@babel/eslint-parser: ^7.19.1 => 7.19.1
@babel/runtime: 7.15.4
@cypress/mount-utils: 0.0.0-development
@cypress/react: 0.0.0-development
@cypress/vue: 0.0.0-development
@cypress/vue2: 0.0.0-development
@edge-runtime/primitives: 1.1.0-beta.31
@emotion/react: ^11.9.0 => 11.10.4
@emotion/styled: ^11.8.1 => 11.10.4
@hapi/accept: undefined ()
@mapbox/mapbox-gl-style-spec: 13.18.0-dev
@mui/icons-material: ^5.8.0 => 5.10.6
@mui/lab: ^5.0.0-alpha.85 => 5.0.0-alpha.100
@mui/material: ^5.6.4 => 5.10.6
@napi-rs/triples: undefined ()
@next/bundle-analyzer: ^12.2.5 => 12.3.1
@next/eslint-plugin-next: ^12.3.0 => 12.3.1
@next/react-dev-overlay: undefined ()
@segment/ajv-human-errors: undefined ()
@stripe/react-stripe-js: ^1.8.1 => 1.10.0
@stripe/stripe-js: ^1.31.0 => 1.36.0
@types/node: 18.0.6 => 18.0.6 (14.18.29, 16.9.1, 10.17.60)
@types/react: ^17.0.2 => 17.0.50
@types/react-dom: 18.0.6 => 18.0.6
@vercel/nft: undefined ()
acorn: undefined ()
amphtml-validator: undefined ()
arg: undefined ()
assert: undefined ()
async-retry: undefined ()
async-sema: undefined ()
aws-amplify: ^4.3.35 => 4.3.35
babel-packages: undefined ()
browserify-zlib: undefined ()
browserslist: undefined ()
buffer: undefined ()
bytes: undefined ()
chalk: undefined ()
chart.js: ^3.7.1 => 3.9.1
chart.js-auto: undefined ()
chart.js-helpers: undefined ()
ci-info: undefined ()
cli-select: undefined ()
comment-json: undefined ()
compression: undefined ()
conf: undefined ()
constants-browserify: undefined ()
content-disposition: undefined ()
content-type: undefined ()
cookie: undefined ()
cross-spawn: undefined ()
crypto-browserify: undefined ()
cssnano-simple: undefined ()
cypress: 10.3.1 => 10.3.1
debug: undefined ()
devalue: undefined ()
domain-browser: undefined ()
edge-runtime: undefined ()
eslint: ^8.23.1 => 8.23.1
eslint-config-next: ^12.3.0 => 12.3.1
eslint-plugin-cypress: ^2.12.1 => 2.12.1
eslint-plugin-react: ^7.31.8 => 7.31.8
events: undefined ()
find-cache-dir: undefined ()
find-up: undefined ()
fresh: undefined ()
get-orientation: undefined ()
gl-matrix: ^3.4.3 => 3.4.3
gl-matrix/mat2: undefined ()
gl-matrix/mat2d: undefined ()
gl-matrix/mat3: undefined ()
gl-matrix/mat4: undefined ()
gl-matrix/quat: undefined ()
gl-matrix/quat2: undefined ()
gl-matrix/types.d.ts: undefined ()
gl-matrix/vec2: undefined ()
gl-matrix/vec3: undefined ()
gl-matrix/vec4: undefined ()
glob: undefined ()
gzip-size: undefined ()
http-proxy: undefined ()
https-browserify: undefined ()
icss-utils: undefined ()
ignore-loader: undefined ()
image-size: undefined ()
imagemin-gifsicle: ^7.0.0 => 7.0.0
imagemin-optipng: ^8.0.0 => 8.0.0
imagemin-svgo: ^9.0.0 => 9.0.0
is-animated: undefined ()
is-docker: undefined ()
is-wsl: undefined ()
jest-worker: undefined ()
json5: undefined ()
jsonwebtoken: undefined ()
loader-utils: undefined ()
lodash.curry: undefined ()
lqip-loader: ^2.2.1 => 2.2.1
lru-cache: undefined ()
mapbox-gl: ^1.13.2 => 1.13.2
micromatch: undefined ()
mini-css-extract-plugin: undefined ()
nanoid: undefined ()
native-url: undefined ()
neo-async: undefined ()
next: ^12.3.1 => 12.3.1
next-optimized-images: ^2.6.2 => 2.6.2
node-fetch: undefined ()
node-html-parser: undefined ()
ora: undefined ()
os-browserify: undefined ()
p-limit: undefined ()
path-browserify: undefined ()
postcss-flexbugs-fixes: undefined ()
postcss-modules-extract-imports: undefined ()
postcss-modules-local-by-default: undefined ()
postcss-modules-scope: undefined ()
postcss-modules-values: undefined ()
postcss-preset-env: undefined ()
postcss-safe-parser: undefined ()
postcss-scss: undefined ()
postcss-value-parser: undefined ()
process: undefined ()
prop-types: ^15.8.1 => 15.8.1
punycode: undefined ()
querystring-es3: undefined ()
raw-body: undefined ()
react: ^18.2.0 => 18.2.0
react-chartjs-2: ^4.1.0 => 4.3.1
react-dom: ^18.2.0 => 18.2.0
react-ga4: ^1.4.1 => 1.4.1
react-is: 17.0.2
react-markdown: ^6.0.0 => 6.0.3
react-refresh: 0.12.0
react-router: ^6.3.0 => 6.4.0
react-server-dom-webpack: undefined ()
regenerator-runtime: 0.13.4
sass-loader: undefined ()
schema-utils: undefined ()
semver: undefined ()
send: undefined ()
setimmediate: undefined ()
source-map: undefined ()
start-server-and-test: 1.14.0 => 1.14.0
stream-browserify: undefined ()
stream-http: undefined ()
string-hash: undefined ()
string_decoder: undefined ()
strip-ansi: undefined ()
stripe: ^9.8.0 => 9.16.0
svg-sprite-loader: ^6.0.11 => 6.0.11
tar: undefined ()
terser: undefined ()
text-table: undefined ()
timers-browserify: undefined ()
tty-browserify: undefined ()
typeface-roboto: ^1.1.13 => 1.1.13
typescript: ^4.6.4 => 4.8.3
ua-parser-js: undefined ()
unistore: undefined ()
use-debounce: ^8.0.2 => 8.0.4
use-deep-compare-effect: ^1.8.1 => 1.8.1
util: undefined ()
vm-browserify: undefined ()
watchpack: undefined ()
web-vitals: ^2.1.4 => 2.1.4 ()
webp-loader: ^0.6.0 => 0.6.0
webpack: undefined ()
webpack-sources: undefined ()
ws: undefined ()
npmGlobalPackages:
@aws-amplify/cli: 8.0.2
corepack: 0.10.0
eslint: 8.23.1
npm: 8.1.2
Describe the bug
Amplify deploys both our back-end and front-end successfully, but upon attempting to load our development environment's page, an HTTP 503 response is thrown with relatively generic error text:
503 ERROR
The request could not be satisfied.
The Lambda function associated with the CloudFront distribution is invalid or doesn't have the required permissions. We can't connect to the server for this app or website at this time. There might be too much traffic or a configuration error. Try again later, or contact the app or website owner.
If you provide content to customers through CloudFront, you can find steps to troubleshoot and help prevent this error by reviewing the CloudFront documentation.
Inspecting CloudWatch exposes an error of type MODULE_NOT_FOUND on fflate, a dependency of @aws-amplify/interactions as seen by the below stacktrace:
ERROR Invoke Error
{
"errorType": "Error",
"errorMessage": "Cannot find module '/var/task/node_modules/fflate/lib/node.cjs'",
"code": "MODULE_NOT_FOUND",
"path": "/var/task/node_modules/fflate/package.json",
"stack": [
"Error: Cannot find module '/var/task/node_modules/fflate/lib/node.cjs'",
" at createEsmNotFoundErr (internal/modules/cjs/loader.js:842:15)",
" at finalizeEsmResolution (internal/modules/cjs/loader.js:835:15)",
" at resolveExports (internal/modules/cjs/loader.js:424:14)",
" at Function.Module._findPath (internal/modules/cjs/loader.js:464:31)",
" at Function.Module._resolveFilename (internal/modules/cjs/loader.js:802:27)",
" at Function.Module._load (internal/modules/cjs/loader.js:667:27)",
" at Module.require (internal/modules/cjs/loader.js:887:19)",
" at require (internal/modules/cjs/helpers.js:74:18)",
" at Object.<anonymous> (/var/task/node_modules/@aws-amplify/interactions/lib/Providers/AWSLexProviderHelper/utils.js:51:16)",
" at Module._compile (internal/modules/cjs/loader.js:999:30)"
]
}
Expected behavior
Ideally the latest Amplify package is able to resource all of its dependencies successfully so we can render our site!
Reproduction steps
Our actual top-level dependencies are fewer than our environment dependencies so I'll list them below:
{
"name": "asdf",
"version": "0.1.0",
"private": true,
"dependencies": {
"@emotion/react": "^11.9.0",
"@emotion/styled": "^11.8.1",
"@mui/icons-material": "^5.8.0",
"@mui/lab": "^5.0.0-alpha.85",
"@mui/material": "^5.6.4",
"@next/bundle-analyzer": "^12.2.5",
"@stripe/react-stripe-js": "^1.8.1",
"@stripe/stripe-js": "^1.31.0",
"aws-amplify": "^4.3.35",
"chart.js": "^3.7.1",
"gl-matrix": "^3.4.3",
"imagemin-gifsicle": "^7.0.0",
"imagemin-optipng": "^8.0.0",
"imagemin-svgo": "^9.0.0",
"lqip-loader": "^2.2.1",
"mapbox-gl": "^1.13.2",
"next": "^12.3.1",
"next-optimized-images": "^2.6.2",
"prop-types": "^15.8.1",
"react": "^18.2.0",
"react-chartjs-2": "^4.1.0",
"react-dom": "^18.2.0",
"react-ga4": "^1.4.1",
"react-markdown": "^6.0.0",
"react-router": "^6.3.0",
"stripe": "^9.8.0",
"svg-sprite-loader": "^6.0.11",
"typeface-roboto": "^1.1.13",
"typescript": "^4.6.4",
"use-debounce": "^8.0.2",
"use-deep-compare-effect": "^1.8.1",
"web-vitals": "^2.1.4",
"webp-loader": "^0.6.0"
},
"overrides": {
"**/@emotion/cache/stylis": "4.0.5"
},
"devDependencies": {
"@babel/eslint-parser": "^7.19.1",
"@next/eslint-plugin-next": "^12.3.0",
"@types/node": "18.0.6",
"@types/react": "^17.0.2",
"@types/react-dom": "18.0.6",
"cypress": "10.3.1",
"eslint": "^8.23.1",
"eslint-config-next": "^12.3.0",
"eslint-plugin-cypress": "^2.12.1",
"eslint-plugin-react": "^7.31.8",
"start-server-and-test": "1.14.0"
},
"scripts": {
"dev": "next dev",
"start": "next start",
"build": "next build",
"lint": "next lint --quiet",
"cypress": "cypress open",
"cypress:headless": "cypress run",
"e2e": "start-server-and-test dev http://localhost:3000 cypress",
"e2e:headless": "start-server-and-test dev http://localhost:3000 cypress:headless"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
a. We're running Next.js 12 but I'm not sure how much a factor that is here. b. Our Amplify integration doesn't rely on @aws-amplify/interactions at all, at least not explicitly
- Run deployment on Amplify
- Assuming the deployment with the above packages has successfully completed, routing to the site should be enough to trigger this repro; it occurs immediately and doesn't attempt to load anything aside from the main HTML entrypoint when the 503 occurs.
Code Snippet
It may be helpful to analyze our build settings here to better understand our environment, so this is our YML file:
version: 1
backend:
phases:
build:
commands:
- '# Execute Amplify CLI with the helper script'
- amplifyPush --simple
frontend:
phases:
preBuild:
commands:
- ls -a
- rm -rf node_modules
- rm -rf .next
- node -v
- npm -v
- nvm use --lts
- node -v
- npm -v
- npm ci
build:
commands:
- nvm use --lts
- node -v
- npm -v
- npm run build
artifacts:
baseDirectory: .next
files:
- '**/*'
cache:
paths:
- node_modules/**/*
As seen above, we're running this code on Node 16.13.2 LTS
aws-exports.js
const awsmobile = {
"aws_project_region": "us-east-1",
"aws_appsync_graphqlEndpoint": "https://bo22okduiffjfc7sd4ksbbzmlu.appsync-api.us-east-1.amazonaws.com/graphql",
"aws_appsync_region": "us-east-1",
"aws_appsync_authenticationType": "API_KEY",
"aws_appsync_apiKey": "da2-raa3arafjzffvgwf4rnmjt3kea",
"aws_cloud_logic_custom": [
{
"name": "webhook",
"endpoint": "https://cq0vb1nm6i.execute-api.us-east-1.amazonaws.com/mat",
"region": "us-east-1"
}
],
"aws_cognito_identity_pool_id": "us-east-1:4ca660e1-31a1-4ff6-9eb1-a146d13c84ed",
"aws_cognito_region": "us-east-1",
"aws_user_pools_id": "us-east-1_l1LWvBuXE",
"aws_user_pools_web_client_id": "5cntrltivg73h72tshmn6un4mf",
"oauth": {},
"aws_cognito_username_attributes": [
"EMAIL"
],
"aws_cognito_social_providers": [],
"aws_cognito_signup_attributes": [
"EMAIL"
],
"aws_cognito_mfa_configuration": "OFF",
"aws_cognito_mfa_types": [
"SMS"
],
"aws_cognito_password_protection_settings": {
"passwordPolicyMinLength": 8,
"passwordPolicyCharacters": []
},
"aws_cognito_verification_mechanisms": [
"EMAIL"
],
"aws_mobile_analytics_app_id": "b49f57b8653444ec885a307f92639d09",
"aws_mobile_analytics_app_region": "us-east-1"
};
export default awsmobile;
