Not working with next.js 13 server components

[rsodre]

Bug Report

Steps

Install clean next.js app, semantic-ui-react, using the new App Router
Add a <Container> or <Button> to the main page
npm run dev

Expected Result

The page should load with the semantic-ui components

Actual Result

The page will not work, displaying the error below
As a workaround, adding 'use client' to the top of the page makes it work
But it disables Server Component features.
https://nextjs.org/docs/getting-started/react-essentials#server-components

Unhandled Runtime Error
Error: Cannot read properties of undefined (reading 'prototype')

Call Stack
prototype
node_modules/@babel/runtime/helpers/inheritsLoose.js (3:48)
ModernAutoControlledComponent
node_modules/semantic-ui-react/dist/commonjs/lib/ModernAutoControlledComponent.js (80:31)
_react
node_modules/semantic-ui-react/dist/commonjs/lib/ModernAutoControlledComponent.js (204:2)
(rsc)/./node_modules/semantic-ui-react/dist/commonjs/lib/ModernAutoControlledComponent.js
/Users/roger/Dev/Blockchain/fDm/hypercartridge/.next/server/app/page.js (3990:1)

Version

"dependencies": {
    "next": "13.4.11",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "sass": "^1.64.0",
    "semantic-ui-css": "^2.5.0",
    "semantic-ui-react": "3.0.0-beta.0"
  }

Testcase

[welcome]

👋 Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you've completed all the fields in the issue template so we can best help.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[layershifter]

It works with use client that is current workaround:
https://stackblitz.com/edit/stackblitz-starters-yzxxtx?file=app%2Fpage.js

The proper thing to do will be to use a Babel plugin to add 'use client' on top of our files.

[GGAlanSmithee]

@layershifter

Would this task be to simply add 'use cient' to all .js files insed the /src/elements folder, or is it a more selective procedure you have in mind?

[GGAlanSmithee]

as a temporary work-around, you can do this (not sure how/if it effects tree-shaking, etc)

// SUI.tsx
"use client"

export * from "semantic-ui-react"

// usage
import { Container } from "@/SUI"

[layershifter]

@layershifter

Would this task be to simply add 'use cient' to all .js files insed the /src/elements folder, or is it a more selective procedure you have in mind?

No, that sounds correct. However, I would prefer this to be done as an automatic transform (babel plugin?).

[adam-bentley]

Is there a roadmap for resolving this issue as I am facing the same problem?

[layershifter]

It will be solved in upcoming beta release, PR is there already (#4452). However, Next.js does not support "dot-syntax" i.e. ListItem - works, List.Item - does not 💥

There is an issue related to the problem (vercel/next.js#44389), however with current implementation I don't believe that it's solvable on their side. I will create a follow-up PR to update examples to not reference that syntax.

[layershifter]

It will be solved in upcoming beta release, PR is there already (#4452). However, Next.js does not support "dot-syntax" i.e. ListItem - works, List.Item - does not 💥

There is an issue related to the problem (vercel/next.js#44389), however with current implementation I don't believe that it's solvable on their side. I will create a follow-up PR to update examples to not reference that syntax.

Codemod is available and can be used:

npx @semantic-ui-react/codemod-dot-syntax --files="docs/src/examples/**/*.js"

[layershifter]

Released in 3.0.0-beta.2 🎉

[maddox05]

for anyone coming back updating to the beta fixes the issues. Works nicely with SSC now

[Agcrov]

Little bit late to the party but anyone has any example where the components are able to be rendered on nextjs 14 server side components? I'm still getting the same error about undefined property and I didn't add that codemod @layershifter was talking about, don't know if that's the solution to it. I'm using nextjs 14.2.3, semantic-ui-react 3.0.0-beta.2.

Thanks in advance!