fix: production build stuck when using NextJS 12

[HellWolf93]

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Describe the bug

When trying to generate a production build with NextJS 12, the process gets stuck. It appears to have something to do with the fonts in the global styles. When leaving only 3 @font-face in the styles everything works fine.

To Reproduce 🕹

Steps to reproduce the behavior:

1. Create a new NextJS app
2. Add react-rainbow-components dependency
3. Use any component in the app
4. Try to build for production (dev works fine)

Expected Behavior 🤔

The app should build correctly.

Current Behavior 😯

The build process hangs forever.

Your Environment 🌎

Desktop (please complete the following information):

• OS: MacOS
• NextJS
• 12

[afu-hive]

I also use next version 12.1.1 and build stuck forever. but now I can build success workaround by import everything from react-rainbow by using dynamic

here example

/*
remove this
import { Column, TableWithBrowserPagination } from 'react-rainbow-components'
*/

// replace code below
const Column = dynamic(() => import('react-rainbow-components/components/Column'), {
  ssr: false,
})

const TableWithBrowserPagination = dynamic(() => import('react-rainbow-components/components/TableWithBrowserPagination'), {
  ssr: false,
})

[miratcan]

I also use next version 12.1.1 and build stuck forever. but now I can build success workaround by import everything from react-rainbow by using dynamic

here example

/*
remove this
import { Column, TableWithBrowserPagination } from 'react-rainbow-components'
*/

// replace code below
const Column = dynamic(() => import('react-rainbow-components/components/Column'), {
  ssr: false,
})

const TableWithBrowserPagination = dynamic(() => import('react-rainbow-components/components/TableWithBrowserPagination'), {
  ssr: false,
})

Which library are you using? this? https://www.npmjs.com/package/@next-tools/dynamic

[afu-hive]

I also use next version 12.1.1 and build stuck forever. but now I can build success workaround by import everything from react-rainbow by using dynamic here example

/*
remove this
import { Column, TableWithBrowserPagination } from 'react-rainbow-components'
*/

// replace code below
const Column = dynamic(() => import('react-rainbow-components/components/Column'), {
  ssr: false,
})

const TableWithBrowserPagination = dynamic(() => import('react-rainbow-components/components/TableWithBrowserPagination'), {
  ssr: false,
})

Which library are you using? this? https://www.npmjs.com/package/@next-tools/dynamic

It's provide from nextJS. you can import directly from nextjs more info https://nextjs.org/docs/advanced-features/dynamic-import

[aestheticsdata]

not working for me. My app is with NextJS v13. The issue was still there with NextJS v12. Upgrading to Node v18 do not change anything.