Production build fails with Unexpected token

[1manprojects]

Using npm run build to create a optimized production build, of a React Typescript application, that includes the react-select component fails to compile with an error with @floating-ui dependency.

Currently I am not very certain if this i truly a bug with react-select or with its @floating-ui dependency.

I could reproduce the error on multiple maschines and i am currently unable to create a production build of my application.

I have also pulled the example code of the react-select v5 code( https://codesandbox.io/s/react-select-v5-sandbox-y5jtm) and have tried to create a production build and that also fails with the following error.

npm run build

> my-app@0.1.0 build
> react-scripts build

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

TypeError: /my-app/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>)

I get the same results wenn using version 5.0.1 and 5.7.0.
Additional if i create a new Typescript React application and include a react-select component i get a different error. But i believe they are related.

npm run build

> my-app@0.1.0 build
> react-scripts build

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

TypeError: /my-app/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>)

To Reproduce
create a React Typescript project
npx create-react-app my-app --template typescript
add dependency in package.json
"react-select": "5.7.0"
Add a react-select component anywhere in the project.
Delete .node_modules folder and run the following

npm install
npm run build

Environment Info:

current version of create-react-app: 5.0.1
running from .npm/_npx/c67e74de0542c87c/node_modules/create-react-app

System:
OS: Linux 5.17 Ubuntu 22.04.1 LTS 22.04.1 LTS (Jammy Jellyfish)
CPU: (16) x64 12th Gen Intel(R) Core(TM) i7-1260P
Binaries:
Node: 16.17.1 - ~/.nvm/versions/node/v16.17.1/bin/node
Yarn: 1.22.19 - ~/.nvm/versions/node/v16.17.1/bin/yarn
npm: 9.2.0 - ~/.nvm/versions/node/v16.17.1/bin/npm
Browsers:
Chrome: 108.0.5359.124
Firefox: 107.0.1
npmPackages:
react: 17.0.2 => 17.0.2
react-dom: 17.0.2 => 17.0.2
react-scripts: 1.0.0 => 1.0.0
npmGlobalPackages:
create-react-app: Not Found

[Danish-Mentorange]

We are getting the same error on our end as well

[JackHull]

Same here! Happens since the latest version.

[mlanlazc]

We have the same problem. Versions are:

 "node": "18.12.1",
 "npm": "8.19.2"

[Methuselah96]

This is an issue with Babel. You can track it at babel/babel#15300.

[EapRules-Revolt]

same issue here !

[ravizenda]

I have started facing the same issue from today itself during the react script build.

Attaching the sample here:

> react-scripts build

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

TypeError: /web-app/node_modules/@floating-ui/core/dist/floating-ui.core.browser.min.mjs: Cannot set property 'kind' of undefined
    at transformFile.next (<anonymous>)
    at run.next (<anonymous>)
    at transform.next (<anonymous>)

Anyone has found any workaround for this?

[Methuselah96]

Should be fixed in @babel/plugin-transform-block-scoping@7.20.8. Closing since this should be resolved now. If you are encountering this issue please make sure you are on the latest version of Babel (you may need to delete your package lock file to get the latest version of @babel/plugin-transform-block-scoping).

[ravizenda]

@Methuselah96 : I'm still getting the same error after deleting the package.lock file.
I have created my react project using create react app and build it through it only. I'm not sure how to upgrade package @babel/plugin-transform-block-scoping if project is created using create-react-app!

[Methuselah96]

Can you check what version of @babel/plugin-transform-block-scoping is being used in your package lock file (either yarn.lock or package-lock.json)?

[ravizenda]

It shows "@babel/plugin-transform-block-scoping": "^7.20.2", in the package-lock.json file now.

[Methuselah96]

That's not what specific version is installed, that's the version range. Can you copy-paste the section of the lock file that lists the actual installed version?

[ravizenda]

Here it is. It's under package-lock.json file.
How can i upgrade it as it's in package-lock file? I have created this react-project using create-react-app a long time ago. I don't know the way to upgrade this. Can you please help me out here as i'm blocked right now.

"@babel/plugin-transform-block-scoping": {
   "version": "7.20.5",
   "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.20.5.tgz",
   "integrity": "sha512-WvpEIW9Cbj9ApF3yJCjIEEf1EiNJLtXagOrL5LNWEZOo3jv8pmPoYTSNJQvqej8OavVlgOoOPw6/htGZro6IkA==",
   "requires": {
     "@babel/helper-plugin-utils": "^7.20.2"
   }
 },

[mueahmad]

@Methuselah96 the issue is still the same, even though the version is up to date. I'm still facing the same error when creating a build.

"dependencies": {
        "@babel/plugin-transform-block-scoping": {
          "version": "7.20.8",
          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.20.8.tgz",
          "integrity": "sha512-ztBCIWJvcWJvtxhMqIrItLmGlbxaa/5hl7HlZvV4f9oS08wWn/mEtf5D35qxFp3rTK8KjV9TePEoeal8z02gzA==",
          "requires": {
            "@babel/helper-plugin-utils": "^7.20.2"
          }
        }
      }

[Methuselah96]

Thanks, looks it it's still an issue according to babel/babel#15300.

[ravizenda]

@Methuselah96 : Is there any quick workaround for this as of now? Upgrading the version of @babel/plugin-transform-block-scoping still gives the same error. Ii'm using react-select in my production web app and due to this error i'm not able to deploy the code on production.
This becomes super critical blocker for me. It would be great if you can suggest some workaround for time being.

[ravizenda]

hey,
I downgraded the version for @babel/plugin-transform-block-scoping. After that ,my react production app is now building successfully.
npm i --save @babel/plugin-transform-block-scoping@7.20.5
I don't know, this is the correct version or not!. But, this hacks works for me as of now.

Let me know if anyone finds any proper solution for this critical fix.
Thank you!

[hzengindev]

I have started facing the same issue from today itself during the react script build.

Attaching the sample here:

> react-scripts build

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

TypeError: /web-app/node_modules/@floating-ui/core/dist/floating-ui.core.browser.min.mjs: Cannot set property 'kind' of undefined
    at transformFile.next (<anonymous>)
    at run.next (<anonymous>)
    at transform.next (<anonymous>)

Anyone has found any workaround for this?

I faced same issue and I downgraded react-select to 5.6.1 and remove yarn.lock file. After that I run "yarn install" and finally everythings works.

[Methuselah96]

Should be fixed in @babel/plugin-transform-block-scoping@7.20.9. Closing since this should be resolved now. If you are encountering this issue please make sure you are on the latest version of Babel (you may need to delete your package lock file to get the latest version of @babel/plugin-transform-block-scoping).