Card Group - Cannot access 'ni' before initialization

[adam-bentley]

Bug Report

The npm run build command throws an error when a next js application is built that uses the card group component. The error message is ReferenceError: Cannot access '{random letter(s)}' before initialization.

Steps

npx create-next-app@latest nextjs-blog --use-npm
npm install semantic-ui-react semantic-ui-css 

page.tsx

"use client";

import 'semantic-ui-css/semantic.min.css'
import { CardGroup } from "semantic-ui-react";

export default function Home() {
  return (
    <CardGroup>

    </CardGroup>
  );
}

npm run build

Expected Result

The app to successfully build.

Actual Result

`Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error

ReferenceError: Cannot access 'ni' before initialization
at 4880 (CardGroupTest\nextjs-blog.next\server\app\page.js:12:43473)
at Object.t [as require] (CardGroupTest\nextjs-blog.next\server\webpack-runtime.js:1:127)
at require (CardGroupTest\nextjs-blog\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:16:18365)
at I (CardGroupTest\nextjs-blog\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:94362)
at CardGroupTest\nextjs-blog\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:96668
at F._fromJSON (CardGroupTest\nextjs-blog\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:97106)
at JSON.parse ()
at O (CardGroupTest\nextjs-blog\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:94083)
at t (CardGroupTest\nextjs-blog\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:100582)
at runNextTicks (node:internal/process/task_queues:60:5)
✓ Generating static pages (5/5)`

Version

semantic-ui-css: ^2.5.0,
semantic-ui-react: ^2.1.5

[shaynethiessen]

I am experiencing this same issue when using Cardgroup in projects created with create-react-app

Uncaught ReferenceError: can't access lexical declaration '__WEBPACK_DEFAULT_EXPORT__' before initialization
    default bundle.js:58244
    js Card.js:159
    factory react refresh:6
    Webpack 23
bundle.js:58244:42
    default bundle.js:58244
    js Card.js:159
    factory react refresh:6
    Webpack 23

As soon as I remove the CardGroup import it works properly again.

Version:
"semantic-ui-css": "^2.5.0",
"semantic-ui-react": "^2.1.5",

[adam-bentley]

I was able to work around this issue by manually specifying both the Card import and the CardGroup import on separate lines in all places where I had used either a Card or CardGroup.

"use client";

import 'semantic-ui-css/semantic.min.css'
import { CardGroup } from "semantic-ui-react";
import { Card } from "semantic-ui-react";

export default function Home() {
  return (
    <CardGroup>

    </CardGroup>
  );
}