Build error when using react-scripts

[sam159]

I've ran into a build issue when using this in a project created with create-react-project.

# npm run build
> react-scripts build  

Creating an optimized production build...
Failed to compile.

TypeError: C:\Users\Sam\WebstormProjects\untitled1\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>)

The same error doesn't occour if I repoint it to use the non-minified mjs file.

Reproduction steps (node 18 or 16)

1. start new project npx create-react-app test-bug
2. install the react-dom package npm install @floating-ui/react-dom
3. update src/App.js to reference package (example below)
4. do npm run build

import {useFloating} from "@floating-ui/react-dom";
import './App.css';

function App() {
  const {x, y, reference, floating, strategy} = useFloating();

  return (
      <>
        <button ref={reference}>Button</button>
        <div
            ref={floating}
            style={{
              position: strategy,
              top: y ?? 0,
              left: x ?? 0,
              width: 'max-content',
            }}
        >
          Tooltip
        </div>
      </>
  );
}
export default App;

[atomiks]

Have you tried updating your Babel config? babel/babel#13907

[sam159]

At the moment the babel config is all handled by react-scripts which is on @babel/preset-env@7.20.2.
So it should all be up to date along with that fix.

[atomiks]

Yeah I see, might have to submit a bug to Babel because it looks like it can't parse(?) or transform that minified file probably even though it's valid.

[atomiks]

Actually, I just updated some Babel deps locally, re-built, pasted it in the repro node_modules and now it builds properly. So the old deps might cause a problem with new versions of Babel or such...

[atomiks]

There may be a bit of a delay in releasing this fix (will be within the next ~1 week though), so in the meantime anyone encountering this issue, install patch-package and edit node_modules/@floating-ui/core/package.json by removing the min from the "browser" default field (so it uses the unminified file, it'll still get minified). This will make your builds work until the patch gets released.

[atomiks]

Well it looks like Babel has a fix for it, it seems like a new issue: babel/babel#15300

So although upgrading the build deps fixed it in this library, it may not be necessary anyway with the new Babel version/fix

[atomiks]

aws-amplify/amplify-ui#3210 (comment)

[reesscot]

I know this isn't directly related to your code, but for others following this ticket I'm seeing a new build error with 7.20.8:

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

We probably need another bug filed against babel?

[atomiks]

Oof yeah... I think they should revert that rewrite they did for now or something and do more testing against it

[reesscot]

Opened a bug here: babel/babel#15302