`react-social-media-embed`：TypeError：Class extends value undefined is not a constructor or null

huangapple
go评论99阅读模式
英文:

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:

  1. import { InstagramEmbed } from 'react-social-media-embed';
  3. export default function Home() {
  4.   return (
  5.     <>
  6.       <main className={`${styles.main} max-w-screen-xl font-serif font-thin`}>
  7.         <div style={{ display: 'flex', justifyContent: 'center' }}>
  8.           <InstagramEmbed url="https://www.instagram.com/p/CUbHfhpswxt/" width={328} />
  9.         </div>
  10.       </main>
  11.     </>
  12.   )
  13. }

All very simple, but when compiling I got this error in the browser:

  1. Server Error
  2. TypeError: Class extends value undefined is not a constructor or null
  4. 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
  6. This error happened while generating the page. Any console logs will be displayed in the terminal window.
  7. Call Stack
  8. ...

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:

  1. import { InstagramEmbed } from &#39;react-social-media-embed&#39;;
  3. export default function Home() {
  4.   return (
  5.     &lt;&gt;
  6.       &lt;main className={`${styles.main} max-w-screen-xl font-serif font-thin`}&gt;
  7.         &lt;div style={{ display: &#39;flex&#39;, justifyContent: &#39;center&#39; }}&gt;
  8.           &lt;InstagramEmbed url=&quot;https://www.instagram.com/p/CUbHfhpswxt/&quot; width={328} /&gt;
  9.         &lt;/div&gt;
  10.       &lt;/main&gt;
  11.     &lt;/&gt;
  12.   )
  13. }

All very simple, but when compiling I got this error in browser:

  1. Server Error
  2. TypeError: Class extends value undefined is not a constructor or null
  4. 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
  6. This error happened while generating the page. Any console logs will be displayed in the terminal window.
  7. Call Stack
  8. Component
  9. node_modules/react-youtube/dist/YouTube.js (144:50)
  10. (sc_server)/./node_modules/react-youtube/dist/YouTube.js
  11. file:///Users/xiaohandu/sanctum-wellbeing/.next/server/app/page.js (2491:1)
  12. __webpack_require__
  13. file:///Users/xiaohandu/sanctum-wellbeing/.next/server/webpack-runtime.js (33:42)
  14. require
  15. node_modules/react-social-media-embed/dist/components/embeds/YouTubeEmbed.js (43:40)
  16. (sc_server)/./node_modules/react-social-media-embed/dist/components/embeds/YouTubeEmbed.js
  17. file:///Users/xiaohandu/sanctum-wellbeing/.next/server/app/page.js (2382:1)
  18. __webpack_require__
  19. file:///Users/xiaohandu/sanctum-wellbeing/.next/server/webpack-runtime.js (33:42)
  20. require
  21. node_modules/react-social-media-embed/dist/index.js (23:13)
  22. (sc_server)/./node_modules/react-social-media-embed/dist/index.js
  23. file:///Users/xiaohandu/sanctum-wellbeing/.next/server/app/page.js (2459:1)
  24. __webpack_require__
  25. file:///Users/xiaohandu/sanctum-wellbeing/.next/server/webpack-runtime.js (33:42)
  26. eval
  27. 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

  1. &quot;use client&quot;

on top the file

huangapple
  • 本文由 发表于 2023年5月15日 06:47:46
  • 转载请务必保留本文链接：https://go.coder-hub.com/76249982.html
  • javascript
  • next.js
  • reactjs
  • typescript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定