amplify-ui: 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
- start new project with
npx create-react-app test-bug --template typescript - install amplify ui
npm i @aws-amplify/ui-react aws-amplify - update
src/App.tsxto the below content - 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)
If you’re using NPM, override the
@babel/plugin-transform-block-scopingdependency to the known good version in yourpackage.jsonfile:Or for Yarn:
@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.8was released: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
Yes, it does.
@reesscot thanks, that fixes the issue for me