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

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?

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"
  }
}

About this issue

  • Original URL
  • State: closed
  • Created 2 years ago
  • Comments: 20 (9 by maintainers)

Commits related to this issue

Most upvoted comments

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.

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')

Hi! I am running into the same issue and have updated the referenced version in package-lock.json file to 7.20.9. But the error persists on amplify publish attempt. What am I missing? Thanks

Edit: npm - i <package> fixed it for me. I can deploy now, thanks again. Kai

Publish started for amplifyhosting

> amplify-react-rest@0.1.0 build
> react-scripts build

Creating an optimized production build...
Failed to compile.
@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>)

@hannan-m Does the overrides/resolutions fix above work for you?

Yes, it does.

@reesscot thanks, that fixes the issue for me