Build error with @floating-ui\core and Create React App

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?

Authenticator

How is your app built?

Create React App

What browsers are you seeing the problem on?

No response

Please describe your bug.

Building a new project with this package results in the following error

TypeError: C:\Users\Sam\WebstormProjects\untitled\node_modules\@floating-ui\core\dist\floating-ui.core.browser.min.mjs: Cannot read properties of undefined (reading 'constantViolations')
    at transformFile.next (<anonymous>)
    at run.next (<anonymous>)
    at transform.next (<anonymous>)

What’s the expected behaviour?

build to succeed

Help us reproduce the bug!

tested with node 18

1. start new project with npx create-react-app test-bug --template typescript
2. install amplify ui npm i @aws-amplify/ui-react aws-amplify
3. update src/App.tsx to the below content
4. build npm run build

Code Snippet

// src/App.tsx
import React from 'react';
import {withAuthenticator, WithAuthenticatorProps} from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';
import './App.css';

function App({ signOut, user } : WithAuthenticatorProps) {
  return (
      <div className="App">
        <p>Hello {user?.username || '?'}</p>
        <button onClick={signOut}>Sign out</button>
      </div>
  );
}

export default withAuthenticator(App);

Additional information and screenshots

{
  "dependencies": {
    "@aws-amplify/ui-react": "^4.3.0",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.10",
    "@types/react": "^18.0.26",
    "@types/react-dom": "^18.0.9",
    "aws-amplify": "^5.0.7",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "typescript": "^4.9.4",
    "web-vitals": "^2.1.4"
  }
}

[reesscot]

If you’re using NPM, override the @babel/plugin-transform-block-scoping dependency to the known good version in your package.json file:

 "overrides": {
    "@babel/plugin-transform-block-scoping": "7.20.5"
  }

Or for Yarn:

"resolutions": {
    "@babel/plugin-transform-block-scoping": "7.20.5"
 },

@nishadthajudeen001 @seeratawan01 @sam159 This is fixing the CRA build for me.

[reesscot]

I’m seeing a new build error after @babel/plugin-transform-block-scoping@7.20.8 was released:

TypeError: /home/runner/work/amplify-ui/amplify-ui/canary/apps/react/cra/node_modules/@floating-ui/core/dist/floating-ui.core.browser.min.mjs: Cannot set properties of undefined (setting 'kind')