TypeError: /codebuild/output/src211105095/src/metafy.video/node_modules/@aws-amplify/geo/lib-esm/util.js: symbol.charCodeAt is not a function

[cloudyape]

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

Amplify APIs

Authentication

Amplify Categories

geo

Environment information

``` # Put output below this line Getting Error in AWS Deployment TypeError: /codebuild/output/src211105095/src/metafy.video/node_modules/@aws-amplify/geo/lib-esm/util.js: symbol.charCodeAt is not a function ```

Describe the bug

Getting Error in AWS Deployment

TypeError: /codebuild/output/src211105095/src/metafy.video/node_modules/@aws-amplify/geo/lib-esm/util.js: symbol.charCodeAt is not a function. I am not even using geo library

Expected behavior

It should not give the above error during deployment

Reproduction steps

Try to deploy in AWS

Code Snippet

// Put your code below this line.

Log output

``` // Put your logs below this line ```

aws-exports.js

No response

Manual configuration

No response

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

No response

[tannerabread]

Hi @cloudyape, you are getting this issue while using Amplify Hosting or deploying elsewhere?

[cloudyape]

@tannerabread I am getting this on AWS and even when doing npm-run-build in local

[tannerabread]

Could you give us the version of amplify you are using, or the package.json dependencies

[cloudyape]

"dependencies": { "@aws-amplify/core": "^5.0.5", "@aws-amplify/ui-react": "^4.2.0", "@fortawesome/fontawesome-svg-core": "^6.2.1", "@fortawesome/free-regular-svg-icons": "^6.2.1", "@fortawesome/free-solid-svg-icons": "^6.2.1", "@fortawesome/react-fontawesome": "^0.2.0", "@testing-library/jest-dom": "^5.14.1", "@testing-library/react": "^13.0.0", "@testing-library/user-event": "^13.2.1", "aws-amplify": "^5.0.5", "bootstrap": "^5.2.2", "jquery": "^3.6.1", "popper.js": "^1.16.1", "react": "^18.2.0", "react-bootstrap": "^2.6.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", "web-vitals": "^2.1.0"

[tannerabread]

You can drop @aws-amplify/core when using aws-amplify. I'm not sure that will fix this issue but it is a start, can you remove the core package, remove node_modules, and retry?

[cloudyape]

I removed, still the same, let me update my new Package.json file

{
  "name": "jsqwerty",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@aws-amplify/ui-react": "^4.2.0",
    "@fortawesome/fontawesome-svg-core": "^6.2.1",
    "@fortawesome/free-regular-svg-icons": "^6.2.1",
    "@fortawesome/free-solid-svg-icons": "^6.2.1",
    "@fortawesome/react-fontawesome": "^0.2.0",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^13.0.0",
    "@testing-library/user-event": "^13.2.1",
    "aws-amplify": "^5.0.5",
    "bootstrap": "^5.2.2",
    "jquery": "^3.6.1",
    "popper.js": "^1.16.1",
    "react": "^18.2.0",
    "react-bootstrap": "^2.6.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "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"
    ]
  },
  "devDependencies": {
    "react-router-dom": "^6.4.3"
  }
}

[tannerabread]

@cloudyape what version of node are you using?

[cloudyape]

@tannerabread v16.14.0

[tannerabread]

Was this a new project started at v5.0.5 or have you built this project successfully before now?

[cloudyape]

Sorry, I built it successfully before, and build was working fine. Then i installed amplify for authentication and build was failing

[tannerabread]

Can you run the following command in your project's root folder:

npx envinfo --system --binaries --browsers --npmPackages --duplicates --npmGlobalPackages

It seems we have had similar reports in the UI repo when there were old global versions of create-react-app to make the project. Were you using CRA for this project?

[cloudyape]

Yes, I used CRA for this project and other CLI commands as well, Also above command gave following

System: OS: Windows 10 10.0.22000 CPU: (12) x64 Intel(R) Core(TM) i7-10750H CPU @ 2.60GHz Memory: 2.04 GB / 15.80 GB Binaries: Node: 16.14.0 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD npm: 8.19.2 - ~\AppData\Roaming\npm\npm.CMD Browsers: Chrome: 108.0.5359.99 Edge: Spartan (44.22000.120.0), Chromium (108.0.1462.46) Internet Explorer: 11.0.22000.120 npmPackages: @aws-amplify/ui-react: ^4.2.0 => 4.2.0 @aws-amplify/ui-react-internal: undefined () @fortawesome/fontawesome-svg-core: ^6.2.1 => 6.2.1 @fortawesome/free-regular-svg-icons: ^6.2.1 => 6.2.1 @fortawesome/free-solid-svg-icons: ^6.2.1 => 6.2.1 @fortawesome/react-fontawesome: ^0.2.0 => 0.2.0 @testing-library/jest-dom: ^5.14.1 => 5.16.5 @testing-library/react: ^13.0.0 => 13.4.0 @testing-library/user-event: ^13.2.1 => 13.5.0 aws-amplify: ^5.0.5 => 5.0.5 bootstrap: ^5.2.2 => 5.2.2 jquery: ^3.6.1 => 3.6.1 popper.js: ^1.16.1 => 1.16.1 react: ^18.2.0 => 18.2.0 (18.1.0) react-bootstrap: ^2.6.0 => 2.6.0 react-bootstrap/AbstractModalHeader: undefined () react-bootstrap/Accordion: undefined () react-bootstrap/AccordionBody: undefined () react-bootstrap/AccordionButton: undefined () react-bootstrap/AccordionCollapse: undefined () react-bootstrap/AccordionContext: undefined () react-bootstrap/AccordionHeader: undefined () react-bootstrap/AccordionItem: undefined () react-bootstrap/AccordionItemContext: undefined () react-bootstrap/Alert: undefined () react-bootstrap/Anchor: undefined () react-bootstrap/Badge: undefined () react-bootstrap/BootstrapModalManager: undefined () react-bootstrap/Breadcrumb: undefined () react-bootstrap/BreadcrumbItem: undefined () react-bootstrap/Button: undefined () react-bootstrap/ButtonGroup: undefined () react-bootstrap/ButtonToolbar: undefined () react-bootstrap/Card: undefined () react-bootstrap/CardGroup: undefined () react-bootstrap/CardHeader: undefined () react-bootstrap/CardHeaderContext: undefined () react-bootstrap/CardImg: undefined () react-bootstrap/Carousel: undefined () react-bootstrap/CarouselCaption: undefined () react-bootstrap/CarouselItem: undefined () react-bootstrap/CloseButton: undefined () react-bootstrap/Col: undefined () react-bootstrap/Collapse: undefined () react-bootstrap/Container: undefined () react-bootstrap/Dropdown: undefined () react-bootstrap/DropdownButton: undefined () react-bootstrap/DropdownContext: undefined () react-bootstrap/DropdownItem: undefined () react-bootstrap/DropdownMenu: undefined () react-bootstrap/DropdownToggle: undefined () react-bootstrap/ElementChildren: undefined () react-bootstrap/Fade: undefined () react-bootstrap/Feedback: undefined () react-bootstrap/Figure: undefined () react-bootstrap/FigureCaption: undefined () react-bootstrap/FigureImage: undefined () react-bootstrap/FloatingLabel: undefined () react-bootstrap/Form: undefined () react-bootstrap/FormCheck: undefined () react-bootstrap/FormCheckInput: undefined () react-bootstrap/FormCheckLabel: undefined () react-bootstrap/FormContext: undefined () react-bootstrap/FormControl: undefined () react-bootstrap/FormFloating: undefined () react-bootstrap/FormGroup: undefined () react-bootstrap/FormLabel: undefined () react-bootstrap/FormRange: undefined () react-bootstrap/FormSelect: undefined () react-bootstrap/FormText: undefined () react-bootstrap/Image: undefined () react-bootstrap/InputGroup: undefined () react-bootstrap/InputGroupContext: undefined () react-bootstrap/ListGroup: undefined () react-bootstrap/ListGroupItem: undefined () react-bootstrap/Modal: undefined () react-bootstrap/ModalBody: undefined () react-bootstrap/ModalContext: undefined () react-bootstrap/ModalDialog: undefined () react-bootstrap/ModalFooter: undefined () react-bootstrap/ModalHeader: undefined () react-bootstrap/ModalTitle: undefined () react-bootstrap/Nav: undefined () react-bootstrap/NavContext: undefined () react-bootstrap/NavDropdown: undefined () react-bootstrap/NavItem: undefined () react-bootstrap/NavLink: undefined () react-bootstrap/Navbar: undefined () react-bootstrap/NavbarBrand: undefined () react-bootstrap/NavbarCollapse: undefined () react-bootstrap/NavbarContext: undefined () react-bootstrap/NavbarOffcanvas: undefined () react-bootstrap/NavbarToggle: undefined () react-bootstrap/Offcanvas: undefined () react-bootstrap/OffcanvasBody: undefined () react-bootstrap/OffcanvasHeader: undefined () react-bootstrap/OffcanvasTitle: undefined () react-bootstrap/OffcanvasToggling: undefined () react-bootstrap/Overlay: undefined () react-bootstrap/OverlayTrigger: undefined () react-bootstrap/PageItem: undefined () react-bootstrap/Pagination: undefined () react-bootstrap/Placeholder: undefined () react-bootstrap/PlaceholderButton: undefined () react-bootstrap/Popover: undefined () react-bootstrap/PopoverBody: undefined () react-bootstrap/PopoverHeader: undefined () react-bootstrap/ProgressBar: undefined () react-bootstrap/Ratio: undefined () react-bootstrap/Row: undefined () react-bootstrap/SSRProvider: undefined () react-bootstrap/Spinner: undefined () react-bootstrap/SplitButton: undefined () react-bootstrap/Stack: undefined () react-bootstrap/Switch: undefined () react-bootstrap/Tab: undefined () react-bootstrap/TabContainer: undefined () react-bootstrap/TabContent: undefined () react-bootstrap/TabPane: undefined () react-bootstrap/Table: undefined () react-bootstrap/Tabs: undefined () react-bootstrap/ThemeProvider: undefined () react-bootstrap/Toast: undefined () react-bootstrap/ToastBody: undefined () react-bootstrap/ToastContainer: undefined () react-bootstrap/ToastContext: undefined () react-bootstrap/ToastFade: undefined () react-bootstrap/ToastHeader: undefined () react-bootstrap/ToggleButton: undefined () react-bootstrap/ToggleButtonGroup: undefined () react-bootstrap/Tooltip: undefined () react-bootstrap/TransitionWrapper: undefined () react-bootstrap/createChainedFunction: undefined () react-bootstrap/createUtilityClasses: undefined () react-bootstrap/createWithBsPrefix: undefined () react-bootstrap/divWithClassName: undefined () react-bootstrap/getTabTransitionComponent: undefined () react-bootstrap/helpers: undefined () react-bootstrap/safeFindDOMNode: undefined () react-bootstrap/transitionEndListener: undefined () react-bootstrap/triggerBrowserReflow: undefined () react-bootstrap/types: undefined () react-bootstrap/useOverlayOffset: undefined () react-bootstrap/usePlaceholder: undefined () react-bootstrap/useWrappedRefWithWarning: undefined () react-dom: ^18.2.0 => 18.2.0 react-router-dom: ^6.4.3 => 6.4.3 react-scripts: 5.0.1 => 5.0.1 web-vitals: ^2.1.0 => 2.1.4 npmGlobalPackages: @angular-builders/custom-webpack: 13.0.0 @angular/cli: 14.2.1 @aws-amplify/cli: 10.5.2 @expo/ngrok: 2.4.3 @ionic/cli: 6.11.0 @tensorflow/tfjs: 3.13.0 brain.js: 2.0.0-beta.4 cordova-res: 0.15.1 cordova: 10.0.0 create-react-app: 3.4.1 expo-cli: 4.4.9 http-server: 14.1.0 native-run: 1.0.0 node-gyp: 8.4.1 npm: 8.19.2 windows-build-tools: 5.2.2 yarn: 1.22.19

[tannerabread]

I tried building a new CRA using v3.4.1 like you are using and then installing amplify and have not been able to reproduce this error.

Did you run into this error before using the library in your app or were you using it somehow? If you are using it somewhere in the app, can you please share how you are importing the package into the app?

[cloudyape]

import logo from "./logo.svg";
import "@aws-amplify/ui-react/styles.css";
import {
  withAuthenticator,
} from "@aws-amplify/ui-react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Button from 'react-bootstrap/Button';
import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import NavDropdown from 'react-bootstrap/NavDropdown';
import Home from "./components/home/home";
import Register from "./components/register/register";
import Login from "./components/login/login";
import Amplify from "@aws-amplify/core";

function App({ signOut }) {
  return (
    <div>
      <Navbar bg="light" expand="lg">
        <Container>
          <Navbar.Brand href="/"><span className="logo-font">JS-QWERTY</span></Navbar.Brand>
          <Navbar.Toggle aria-controls="basic-navbar-nav" />
          <Navbar.Collapse id="basic-navbar-nav" className="justify-content-end">
            <Nav className="">
              <Nav.Link href="/register" className=""><Button variant="secondary">Register</Button></Nav.Link>
              <Nav.Link href="/login" className=""><Button variant="danger">Login</Button></Nav.Link>
            </Nav>
          </Navbar.Collapse>
        </Container>
      </Navbar>
      <Navbar bg="danger" expand="lg">
        <Container>
          <Navbar.Toggle aria-controls="basic-navbar-topics" />
          <Navbar.Collapse id="basic-navbar-topics" className="justify-content-center">
            <Nav className="">
              <Nav.Link href="#home"><b className='text-white'>Data Structures & Algorithms</b></Nav.Link>
            </Nav>
          </Navbar.Collapse>
        </Container>
      </Navbar>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/register" element={<Register />} />
          <Route path="/login" element={<Login />} />
          <Route path="*" element={<Home />} />
        </Routes>
      </BrowserRouter>
    </div>
  );
}

export default withAuthenticator(App);

[cloudyape]

I tried building a new CRA using v3.4.1 like you are using and then installing amplify and have not been able to reproduce this error.

Did you run into this error before using the library in your app or were you using it somehow? If you are using it somewhere in the app, can you please share how you are importing the package into the app?

My CRA Version is 5.0.1

"name": "react-scripts", "version": "5.0.1", "description": "Configuration and scripts for Create React App.", "repository": { "type": "git", "url": "https://github.com/facebook/create-react-app.git", "directory": "packages/react-scripts" },

[cloudyape]

It works well with v3.4.1 but shows error with latest 5.0.1

[tannerabread]

I was able to reproduce this when importing withAuthenticator when using CRA v3.4.1, seeing the same build errors as your original post.

I made a new project with CRA v5.0.1 and added the same code in App.js and the problem went away. I think an upgrade on Create React App to the latest version should solve the build issues.

What errors are you seeing in 5.0.1?

Side Note: It doesn't seem to be effecting your app because from what you showed me, you aren't actually using the Amplify import. However, we switched to all named exports recently so if you end up using any core Amplify functionality, you should switch the import to import { Amplify } from '@aws-amplify/core'

To the above note, did you find the non-named import somewhere in our docs? E.g. this line import Amplify from '@aws-amplify/core' If so, can you point me to it so that I can fix the reference

[tannerabread]

Hi @cloudyape were you still experiencing errors or did you see the same behavior that I outlined above? If you were getting additional errors with CRA v5.0.1 rather than v3.4.1 we can continue the investigation

[balyanrobin]

Hi All,

I am facing the same issue on "aws-amplify": "^5.0.7", "aws-amplify-react": "^5.1.43", "react": "^18.2.0",

Do we have a suggested workaround for CRA 5? tried aws-amplify ^3 but that gives me some other issues with amplify. Thanks a lot in advance for the help

[balyanrobin]

No worries, it worked for me. Delete yarn.lock and node_modules and it is working again

[tannerabread]

@balyanrobin you were having problems with CRA5 and Amplify v5?

[RanningMan]

@tannerabread I'm having the same issue using amplify v5 and most recent CRA. My dependency:

"dependencies": {
    "@aws-amplify/ui-react": "^4.3.0",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^13.0.0",
    "@testing-library/user-event": "^14.4.3",
    "aws-amplify": "^5.0.7",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.6.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^3.1.0"
 }

[tannerabread]

@RanningMan Can you try to run the build without the @aws-amplify/ui-react dependency or any of the components it imports in your app?

[RanningMan]

I resolved the issue by removing yarn.lock, package.lock and node_modules, then rebuild.

[nadetastic]

Hi @balyanrobin & @RanningMan

To clarify, did you face this issue when attempting to update to a new version of aws-amplify (looks like 5.0.x) ?

[RanningMan]

@nadetastic I faced this issue when attempting to generate a production build. It works fine while using dev build.

[tannerabread]

Closing as this is resolved. If anyone else experiences this issue please try to remove yarn/package.lock and node_modules and reinstall/rebuild.

Thank you!