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

[sam159]

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

[sam159]

i've reproduced the issue using floating-ui and reported it there floating-ui/floating-ui#2062

i'll update here if theres any progress

[sam159]

until the next version of floating-ui is released the work around is to use the non-minified js from floating-ui. see floating-ui/floating-ui#2062 (comment)

[reesscot]

Related to the following babel issue: babel/babel#15300

Workaround until babel is fixed and is updated in create react app: floating-ui/floating-ui#2062 (comment)

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

[seeratawan01]

yes same

[reesscot]

Opened a bug with babel here: babel/babel#15302

[nishadthajudeen001]

any updates? below error with @babel/plugin-transform-block-scoping@7.20.8
Cannot set property 'kind' of undefined

[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.

[sam159]

@reesscot thanks, that fixes the issue for me

[hannan-m]

Facing similar issue with @fluentui/react as well.

node_modules\@floating-ui\core\dist\floating-ui.core.browser.min.mjs: Cannot set properties of undefined (setting 'kind')
    at transformFile.next (<anonymous>)
    at run.next (<anonymous>)
    at transform.next (<anonymous>)

[reesscot]

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

[reesscot]

This babel bug has been fixed in @babel/plugin-transform-block-scoping@7.20.9. For anyone following this tread, you can remove your overrides and update your package lock files to get the fix without the overrides workaround.

[hannan-m]

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

Yes, it does.

[joywin-dev]

Hi All - Facing the same issue. Locally the solution of changing the package.json file for flowbite library works. But I am deploying it on aws amplify. And on deploy the build over there fails. Any idea on how I can solve this

[reesscot]

@joywin-dev Can you please open an issue over on the hosting repo with the error you're getting? https://github.com/aws-amplify/amplify-hosting/issues

[joywin-dev]

@joywin-dev Can you please open an issue over on the hosting repo with the error you're getting? https://github.com/aws-amplify/amplify-hosting/issues

It is the same issue. Build works well on local after changing the package.json to unminified version. But the code is then pushed to github. But the nodmodules is not pushed. Then the hosting platform picks up the code from github and i get the build error which i had resolved in my local build.

[reesscot]

@joywin-dev If it's working locally but not during build, it sounds like it could be a caching issue during the build on amplify hosting. I would recommend opening an issue over there so the hosting team can further assist.

[joywin-dev]

@reesscot - Thanks for your help! Also is this issue going to be fixed? Any update from floating-ui team?

[reesscot]

@joywin-dev The issue was a babel bug which has been fixed:

This babel bug has been fixed in @babel/plugin-transform-block-scoping@7.20.9. For anyone following this tread, you can remove your overrides and update your package lock files to get the fix without the overrides workaround.

[kaimoeller]

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