Nextjs13 serverside components

[nickgrato]

Describe the bug
When using in a Nextjs13 server component I get the error "Error [TypeError]: Super expression must either be null or a function". When I turn the component into a client-side component everything works fine. The dilemma is for me to have syntax highlighting I can't have a more performant serverside blog page but need to make it client-side. It would be awesome if this lib worked on server-side components.

To Reproduce
Steps to reproduce the behavior:

1. Create a NextJS 13 app.
2. Keep page.tsx a serverside component and try and use
   
   TEST
   

Expected behavior
"Error [TypeError]: Super expression must either be null or a function" error should be displayed.

Screenshots
I don't think screenshots would be helpful here.

Desktop (please complete the following information):

• desktop/firefox

Additional context
This works great non-the-less. I know everyone is catching up to serverside stuff so understandable. This is a great product.

[developerrajtomar]

Even I came across the same error: Error [TypeError]: Super expression must either be null or a function. @nickgrato thanks for sharing the resolution as well.

`null

• wait compiling...
• event compiled successfully in 224 ms (1738 modules)
• error node_modules/@babel/runtime/helpers/inherits.js (4:10) @ _inherits
• error Error [TypeError]: Super expression must either be null or a function
  at _inherits (webpack-internal:///(rsc)/./node_modules/@babel/runtime/helpers/inherits.js:5:15)
  at eval (webpack-internal:///(rsc)/./node_modules/react-syntax-highlighter/dist/cjs/async-syntax-highlighter.js:45:35)
  at _default (webpack-internal:///(rsc)/./node_modules/react-syntax-highlighter/dist/cjs/async-syntax-highlighter.js:164:6)
  at eval (webpack-internal:///(rsc)/./node_modules/react-syntax-highlighter/dist/cjs/light-async.js:50:55)
  at (rsc)/./node_modules/react-syntax-highlighter/dist/cjs/light-async.js (/.next/server/app/blog/page.js:14194:1)
  at webpack_require (/.next/server/webpack-runtime.js:33:42)
  at eval (webpack-internal:///(rsc)/./node_modules/react-syntax-highlighter/dist/cjs/index.js:55:42)
  at (rsc)/./node_modules/react-syntax-highlighter/dist/cjs/index.js (/.next/server/app/blog/page.js:14161:1)
  at webpack_require (/.next/server/webpack-runtime.js:33:42)
  at eval (webpack-internal:///(rsc)/./src/app/blog/page.tsx:8:82) {
  digest: undefined
  }`

[Ruffeng]

I bumped into this issue again.
The best round about so far is some React Composition to not transform the entire page into client if you are working with a server component.

Something like this should do the work if you import it in your server component. Only this small piece of code will be client side, minimizing the impact

"use client"

import { Prism } from 'react-syntax-highlighter';
import { dark } from 'react-syntax-highlighter/dist/esm/styles/prism';


export function SyntaxHighlighter(children: React.ReactNode) {
  return (
    <Prism language="javascript" style={dark}>
      {children}
    </Prism>
  );

[nickgrato]

I ended up going with another library for now but will stay tuned here.

[SalahAdDin]

I ended up going with another library for now but will stay tuned here.

Which library are you using? I was regarding this feature for my portfolio.

[barrett-ruth]

@nickgrato ^

[nickgrato]

I ended up going with another library for now but will stay tuned here.

Which library are you using? I was regarding this feature for my portfolio.

Sorry for the late reply - I ended up using shiki - I did have to hack a little of that even to get that to work right though.... my blog's code should be public if you want to see how I did it. @barrett-ruth

https://github.com/nickgrato/grato_codes/blob/main/app/blog/%5Bslug%5D/page.tsx

[SalahAdDin]

I ended up going with another library for now but will stay tuned here.

Which library are you using? I was regarding this feature for my portfolio.

Sorry for the late reply - I ended up using shiki - I did have to hack a little of that even to get that to work right though.... my blog's code should be public if you want to see how I did it. @barrett-ruth

https://github.com/nickgrato/grato_codes/blob/main/app/blog/%5Bslug%5D/page.tsx

Your blog looks cool!

Can you explain why was it so tricky to implement?

[nickgrato]

I ended up going with another library for now but will stay tuned here.

Which library are you using? I was regarding this feature for my portfolio.

Sorry for the late reply - I ended up using shiki - I did have to hack a little of that even to get that to work right though.... my blog's code should be public if you want to see how I did it. @barrett-ruth
https://github.com/nickgrato/grato_codes/blob/main/app/blog/%5Bslug%5D/page.tsx

Your blog looks cool!

Can you explain why was it so tricky to implement?

thank you!

so in that link I sent you if you look at the function getHighlighter(); it shows the "ticky-ness" but even with shiki I had to tell nextjs about the library so on the serverside it has those files "return pathJoin(process.cwd(), 'libs/shiki');" and doesn't wait till the client side to access that library.

[SalahAdDin]

I ended up going with another library for now but will stay tuned here.

Which library are you using? I was regarding this feature for my portfolio.

Sorry for the late reply - I ended up using shiki - I did have to hack a little of that even to get that to work right though.... my blog's code should be public if you want to see how I did it. @barrett-ruth
https://github.com/nickgrato/grato_codes/blob/main/app/blog/%5Bslug%5D/page.tsx

Your blog looks cool!
Can you explain why was it so tricky to implement?

thank you!

so in that link I sent you if you look at the function getHighlighter(); it shows the "ticky-ness" but even with shiki I had to tell nextjs about the library so on the serverside it has those files "return pathJoin(process.cwd(), 'libs/shiki');" and doesn't wait till the client side to access that library.

I think there is a similar issue with the react-player library: it does not work in serverside, we have to use client components to render it.

So, you handled it to be rendered in serverside, right?

[nickgrato]

I ended up going with another library for now but will stay tuned here.

Which library are you using? I was regarding this feature for my portfolio.

Sorry for the late reply - I ended up using shiki - I did have to hack a little of that even to get that to work right though.... my blog's code should be public if you want to see how I did it. @barrett-ruth
https://github.com/nickgrato/grato_codes/blob/main/app/blog/%5Bslug%5D/page.tsx

Your blog looks cool!
Can you explain why was it so tricky to implement?

thank you!
so in that link I sent you if you look at the function getHighlighter(); it shows the "ticky-ness" but even with shiki I had to tell nextjs about the library so on the serverside it has those files "return pathJoin(process.cwd(), 'libs/shiki');" and doesn't wait till the client side to access that library.

I think there is a similar issue with the react-player library: it does not work in serverside, we have to use client components to render it.

So, you handled it to be rendered in serverside, right?

correct