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[bot]]

👋 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 (https://github.com/vercel/next.js/issues/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 🎉