Error when integrating MapView with Amplify

[Noorbakht]

Before creating a new issue, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have tried disabling all browser extensions or using a different browser
• I have tried deleting the node_modules folder and reinstalling my dependencies
• I have read the guide for submitting bug reports.

On which framework/platform are you having an issue?

React

Which UI component?

Other

How is your app built?

Create React App --template typescript

What browsers are you seeing the problem on?

Firefox, Chrome

Please describe your bug.

Integrating MapView component into my React typescript application works perfect with localhost but gives me an error of "ReferenceError: g is not defined" on my amplify website and am unable to view the map on my amplify domain.

import { MapView } from '@aws-amplify/ui-react';
import { Authenticator } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';

import awsExports from './aws-exports';
Amplify.configure(awsExports);

export default function App() {
  return (
    <Authenticator>
      {({ signOut, user }) => (
        <main>
          <MapView />
          <button onClick={signOut}>Sign out</button>
        </main>
      )}
    </Authenticator>
  );
}

What's the expected behaviour?

No error and a view of the map on the website.

Help us reproduce the bug!

package.json file:

{
  "name": "sample-amplify-location",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@aws-amplify/ui-react": "^3.4.1",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.11.55",
    "@types/react": "^18.0.17",
    "@types/react-dom": "^18.0.6",
    "aws-amplify": "^4.3.33",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "typescript": "^4.7.4",
    "web-vitals": "^2.1.4"
  },
  "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"
    ]
  }
}

Code Snippet

import { MapView } from '@aws-amplify/ui-react';
import { Authenticator } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';

import awsExports from './aws-exports';
Amplify.configure(awsExports);

export default function App() {
  return (
    <Authenticator>
      {({ signOut, user }) => (
        <main>
          <MapView />
          <button onClick={signOut}>Sign out</button>
        </main>
      )}
    </Authenticator>
  );
}

Additional information and screenshots

No response

[ErikCH]

Hi @Noorbakht !

Thanks for brining this up. We are looking into it now!

[ErikCH]

@Noorbakht ! We found this is related to a known issue with maplibre library . It sometimes appears as Uncaught ReferenceError: _wrapNativeSuper is not defined or as ReferenceError: g is not defined Or y is not defined.

To fix this issue it's recommended to change your package.json browserslist definition for production as seen below:

"browserslist": {
    "production": [
     "defaults",
     "not ie 11"
    ],

This will fix the build so when you run it, you won't see the error.

Can you try this and see if it fixes your issue?

[Noorbakht]

Yes it works - thank you so much!