英文:
react-social-media-embed: TypeError: Class extends value undefined is not a constructor or null
问题
I was trying to use "react-social-media-embed" in my Next TS project. I did the following:
npm i react-social-media-embed
my page.tsx looks like this:
import { InstagramEmbed } from 'react-social-media-embed';
export default function Home() {
return (
<>
<main className={`${styles.main} max-w-screen-xl font-serif font-thin`}>
<div style={{ display: 'flex', justifyContent: 'center' }}>
<InstagramEmbed url="https://www.instagram.com/p/CUbHfhpswxt/" width={328} />
</div>
</main>
</>
)
}
All very simple, but when compiling I got this error in the browser:
Server Error
TypeError: Class extends value undefined is not a constructor or null
This might be caused by a React Class Component being rendered in a Server Component, React Class Components only work in Client Components. Read more: https://nextjs.org/docs/messages/class-component-in-server-component
This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
...
Any idea why and how to fix it?
英文:
I was trying to use "react-social-media-embed" in my Next TS project. I did the following:
npm i react-social-media-embed
my page.tsx looks like this:
import { InstagramEmbed } from 'react-social-media-embed';
export default function Home() {
return (
<>
<main className={`${styles.main} max-w-screen-xl font-serif font-thin`}>
<div style={{ display: 'flex', justifyContent: 'center' }}>
<InstagramEmbed url="https://www.instagram.com/p/CUbHfhpswxt/" width={328} />
</div>
</main>
</>
)
}
All very simple, but when compiling I got this error in browser:
Server Error
TypeError: Class extends value undefined is not a constructor or null
This might be caused by a React Class Component being rendered in a Server Component, React Class Components only works in Client Components. Read more: https://nextjs.org/docs/messages/class-component-in-server-component
This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
Component
node_modules/react-youtube/dist/YouTube.js (144:50)
(sc_server)/./node_modules/react-youtube/dist/YouTube.js
file:///Users/xiaohandu/sanctum-wellbeing/.next/server/app/page.js (2491:1)
__webpack_require__
file:///Users/xiaohandu/sanctum-wellbeing/.next/server/webpack-runtime.js (33:42)
require
node_modules/react-social-media-embed/dist/components/embeds/YouTubeEmbed.js (43:40)
(sc_server)/./node_modules/react-social-media-embed/dist/components/embeds/YouTubeEmbed.js
file:///Users/xiaohandu/sanctum-wellbeing/.next/server/app/page.js (2382:1)
__webpack_require__
file:///Users/xiaohandu/sanctum-wellbeing/.next/server/webpack-runtime.js (33:42)
require
node_modules/react-social-media-embed/dist/index.js (23:13)
(sc_server)/./node_modules/react-social-media-embed/dist/index.js
file:///Users/xiaohandu/sanctum-wellbeing/.next/server/app/page.js (2459:1)
__webpack_require__
file:///Users/xiaohandu/sanctum-wellbeing/.next/server/webpack-runtime.js (33:42)
eval
webpack-internal:///(sc_server)/./src/app/page.tsx (9:82)
Any idea why and how to fix it?
答案1
得分: 1
"the error already states the issue"
"这个错误已经指出了问题"
"> This might be caused by a React Class Component being rendered in a Server Component, React Class Components only works in Client Components. Read more: https://nextjs.org/docs/messages/class-component-in-server-component"
"> 这可能是因为在服务器组件中渲染了一个React类组件，React类组件只能在客户端组件中工作。阅读更多: https://nextjs.org/docs/messages/class-component-in-server-component"
"change current component to client component by adding"
"通过添加 'use client' 切换当前组件为客户端组件"
"on top the file"
"在文件顶部"
英文:
the error already states the issue
> This might be caused by a React Class Component being rendered in a
> Server Component, React Class Components only works in Client
> Components. Read more:
> https://nextjs.org/docs/messages/class-component-in-server-component
change current component to client component by adding
"use client"
on top the file
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论