Giters

Semantic-Org / Semantic-UI-React

The official Semantic-UI-React integration

Home Page:https://react.semantic-ui.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Not working with next.js 13 server components

rsodre opened this issue · comments

commented

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

commented

👋 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.

commented

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.

commented

@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?

commented

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

@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?).

commented

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

commented

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.

commented

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"