Semantic-Org / Semantic-UI-React

The official Semantic-UI-React integration
https://react.semantic-ui.com
MIT License
13.2k stars 4.04k forks source link

Card Group - Cannot access 'ni' before initialization #4481

Open adam-bentley opened 1 month ago

adam-bentley commented 1 month ago

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 commented 5 days ago

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",