search

aws-amplify / amplify-ui

Amplify UI is a collection of accessible, themeable, performant React (and more!) components that can connect directly to the cloud.
https://ui.docs.amplify.aws
Apache License 2.0
908 stars 288 forks source link

Uncaught RangeError in Chrome with Vite and Amplify #2185

Closed dmost714 closed 2 years ago

dmost714 commented 2 years ago

Before creating a new issue, please confirm:

On which framework/platform are you having an issue?

React

Which UI component?

Authenticator

How is your app built?

vite

Please describe your bug.

When developing (yarn dev) in Google Chrome Version 102.0.5005.115 on macOS Monterey v12.4, I get an Uncaught RangeError: Maximum call stack size exceeded. I'm not seeing this error in Safari or Firefox. I have not pushed into production, so cannot confirm if the issue is there or just during local development (possibly due to HMR).

image

Attemping to eliminate the issue, I slimmed the app down to this: main.txs

render(
  <StrictMode>
    <AmplifyProvider>
      <Authenticator.Provider>
        <div>hello world</div>
      </Authenticator.Provider>
    </AmplifyProvider>
  </StrictMode>,
  document.getElementById('root')
)

The issue goes away if I remove <Authenticator.Provider>, and is present if I ONLY use < Authenticator.Provider> and the hello world div.

What's the expected behaviour?

No stack overflow.

Help us reproduce the bug!

I'm running node 18.3.0 yarn 1.22.19 amplify 9.0.0 I deleted node_modules & yarn.lock and re-installed everything, so the package versions are the latest as of June 23rd.

Here's my vite.config.ts

/// <reference types="vitest" />
/// <reference types="vite/client" />

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: [
      {
        find: './runtimeConfig',
        replacement: './runtimeConfig.browser',
      },
    ]
  },
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: './src/test/setup.ts',
  }
})

Here's my tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": [
      "DOM",
      "DOM.Iterable",
      "ESNext"
    ],
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "importHelpers": true
  },
  "include": [
    "./src"
  ]
}

Here's index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Pixels To Postcards</title>
  </head>
  <body>
    <div id="root"></div>
    <script>
      window.global = window;
      window.process = {
        env: { DEBUG: undefined },
      };
      var exports = {};
    </script>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

Most simple main.tsx that generates the error:

import React from 'react'
import ReactDOM from 'react-dom'
import './tailwind.css'
import { Amplify } from "aws-amplify"
import App from './App'
import { AmplifyProvider, Authenticator } from '@aws-amplify/ui-react'

// @ts-ignore
import awsExports from "./aws-exports"
Amplify.configure(awsExports)

ReactDOM.render(
  <Authenticator.Provider>
    <div>hello world</div>
  </Authenticator.Provider>,
  document.getElementById('root')
)

Here's my package.json

{
  "name": "XXXXXX",
  "version": "0.0.0",
  "license": "UNLICENSED",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "test": "vitest",
    "test:ui": "vitest --ui",
    "coverage": "vitest run --coverage",
    "preview": "vite preview",
    "amplify: XXXXXXGQLResolver": "cd amplify/backend/function/XXXXXXGQLResolver/src;yarn build;cd -",
    "amplify: XXXXXXSftp": "cd amplify/backend/function/XXXXXXSftp/src;yarn build;cd -"
  },
  "dependencies": {
    "@aws-amplify/ui-react": "^2.1.6",
    "@aws-sdk/lib-storage": "^3.107.0",
    "@fontsource/inter": "^4.5.1",
    "@headlessui/react": "^1.4.0",
    "@heroicons/react": "^1.0.4",
    "add": "^2.0.6",
    "aws-amplify": "^4.3.18",
    "crypto-js": "^4.1.1",
    "daisyui": "^1.25.4",
    "date-fns": "^2.28.0",
    "nanoid": "^3.2.0",
    "prop-types": "^15.8.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-draggable": "^4.4.5",
    "react-dropzone": "^12.0.4",
    "react-hook-form": "^7.26.0",
    "react-router": "^6.2.1",
    "react-router-dom": "^6.2.1",
    "react-waypoint": "^10.1.0",
    "use-resize-observer": "^9.0.2",
    "xlsx": "^0.17.3",
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^5.16.2",
    "@testing-library/react": "^12.1.4",
    "@testing-library/user-event": "^13.5.0",
    "@types/aws-lambda": "^8.10.93",
    "@types/node": "^17.0.21",
    "@types/react": "^17.0.33",
    "@types/react-dom": "^17.0.10",
    "@types/react-test-renderer": "^17.0.1",
    "@vitejs/plugin-react": "^1.0.7",
    "@vitest/ui": "^0.7.7",
    "autoprefixer": "^10.4.1",
    "aws-lambda": "^1.0.7",
    "c8": "^7.11.0",
    "jsdom": "^19.0.0",
    "postcss": "^8.4.5",
    "postcss-cli": "^9.1.0",
    "postcss-import": "^14.0.2",
    "react-email-editor": "https://github.com/dmost714/react-email-editor.git",
    "react-test-renderer": "^17.0.2",
    "tailwindcss": "^3.0.11",
    "typescript": "^4.6.3",
    "vite": "^2.9.12",
    "vitest": "^0.15.2"
  }
}

Code Snippet

// Put your code below this line.

Additional information and screenshots

No response

reesscot commented 2 years ago

@dmost714 I'm unable to reproduce this error using the configurations you provided. From your screenshot the error message is coming from a backend.bundle.js file which I don't have. Do you know what code is running in that file?

reesscot commented 2 years ago

Discussed further with Dave on discord and it ended up being a Chrome extension which was causing the error. Closing out as it's not an issue with the Amplify UI library.

dmost714 commented 2 years ago

I was able to narrow it down to the "ReactTime" Chrome extension: https://chrome.google.com/webstore/detail/reactime/cgibknllccemdnfhfpmjhffpjfeidjga/related

Thanks for pointing me in the right direction.