next run build hangs indefinitely with react-rainbow-components

[ertyagi]

Verify canary release

• I verified that the issue exists in Next.js canary release

Provide environment information

Operating System:
Platform: darwin
Arch: x64
Version: Darwin Kernel Version 19.6.0: Mon Apr 18 21:50:40 PDT 2022; root:xnu-6153.141.62~1/RELEASE_X86_64
Binaries:
Node: 16.15.1
npm: 8.11.0
Yarn: 1.22.18
pnpm: N/A
Relevant packages:
next: 12.1.7-canary.33
react: 17.0.2
react-dom: 17.0.2

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

If we use react-rainbow-components (https://github.com/nexxtway/react-rainbow) in a nextJs app, the command npm run build hangs indefinitely and never finishes. We need to manually kill the node process to get rid of it. The build process doesn't give any errors. Here is a sample output of the command npm run build:

> build
> next build

info  - Linting and checking validity of types ..warn  - No ESLint configuration detected. Run next lint to begin setup
info  - Linting and checking validity of types  
info  - Creating an optimized production build ...

npm run dev works just fine.

Expected Behavior

The build process should either:
finish without any issues
or
give a clear error message and die gracefully.

To Reproduce

Create a new Next Js project using create-next-app
npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"

Update the Next Js to Canary build:
npm install next@canay

Install react-rainbow-components
npm install react-rainbow-components --save

Edit pages/index.js and add the following line:
import { Button } from 'react-rainbow-components';

Run next build:
npm run build

See the following out in the terminal

> build
> next build

info  - Linting and checking validity of types ..warn  - No ESLint configuration detected. Run next lint to begin setup
info  - Linting and checking validity of types  
info  - Creating an optimized production build ...

[balazsorban44]

This seems to be a known issue with the library: nexxtway/react-rainbow#1471

It did not hang while trying to reproduce, but I got the following error:

Can't resolve '@babel/runtime/helpers/interopRequireDefault' ...

So there might be an issue with the package's build step.

[ertyagi]

@balazsorban44 The React rainbow team could not solve this issue, they simply closed it. Please see the last comment:

Yep exactly same thing for us. A lot of time was lost to find the cause of nextjs 12 hang.

We're searching for an alternative calendar.

The problem is not provided by nextjs build logs. Hard to say what is the problem with rainbow components.

Could you please share your environment information where you tried reproducing it? I am not getting any errors and the build simply hangs.

[balazsorban44]

The issue is still open, and the comment you are referencing is not from the maintainers, but a user, as far as I can tell.

For reproduction, I followed the steps you described. 🤔

[ertyagi]

@balazsorban44 Thanks for your comment. This is the last comment from one of the maintainers:

I am very sorry to hear that, we try to maintain the library in our free time, and many times users find issues that we have not had before. This is an open-source library and you are free to contribute by fixing any problems if you wish.

Also, I was asking for your environment information which you used to reproduce not the steps to reproduce.

[balazsorban44]

Oh, I saw that, but no mention of ignoring the issue, they just don't seem to have the time and ask for help from users.

I used Ubuntu 22.04. Unfortunately without reproducing the issue I also cannot further investigate and give suggestions on where to look.

If a build is slow, usually we can ask for a trace file that's created in the .next folder which holds information about the build process and timings, but in your case, the build seems to not even finish.

[ertyagi]

@balazsorban44 I tried this on Ubuntu 22.04 and got this error too:
Can't resolve '@babel/runtime/helpers/interopRequireDefault' ...

I added @babel/runtime by doing:
npm add @babel/runtime
and then run the next build:
npm run build

and the build got hanged without giving any error just like on MacOs. I can understand that this issue is happening with react-rainbow, but it's the next build that is hanging. So this is definitely a bug with the next build. It can potentially happen with any other library too and can waste so much time and energy. I would suggest you re-open this issue, Thanks!

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.