Unexpected token 'export' when used in NextJs

When I import Themes inside NextJs application from themes directory(‘react-syntax-highlighter/dist/cjs/styles/hljs’) as:

import { atomOneDark, atomOneLight } from "react-syntax-highlighter/dist/cjs/styles/hljs";
It throws a syntax ERROR as

Unexpected token 'export'

I looked for some solution from Internet, at tried dynamic import as:

import dynamic from 'next/dynamic'

const { atomOneDark, atomOneLight } = dynamic(
  () => import('react-syntax-highlighter/dist/cjs/styles/hljs'),
  { ssr: false }
)

And,

import dynamic from 'next/dynamic'

const atomOneDark = dynamic(
  () => import('react-syntax-highlighter/dist/cjs/styles/hljs/atom-one-dark'),
  { ssr: false }
)

Still not solved.

Then I tried to simply import individual theme directly from theme file, fortunately it works for me;

import atomOneDark from "react-syntax-highlighter/dist/cjs/styles/hljs/atom-one-dark";
import atomOneLight from "react-syntax-highlighter/dist/cjs/styles/hljs/atom-one-light";

Please have a look at it.

[triyanox]

I’ve used the commonjs modules instad of esmodules and it worked just fine ! just make sure not using the cjs modules like esmodules

{your module}

instand use them like this

import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { materialDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
import { materialLight } from "react-syntax-highlighter/dist/cjs/styles/prism";
import { ThemeContext } from "../Themes/ThemeContext";
import { useContext } from "react";

function highlighter(props) {
  const { theme, setTheme } = useContext(ThemeContext);

  return (
    <SyntaxHighlighter
      language={props.language}
      style={theme === "dark" ? materialDark : materialLight}
    >
      {props.children}
    </SyntaxHighlighter>
  );
}
export default highlighter;

[mrLuisFer]

I try what @tlamadon comments and it works, it no longer shows the error, but it doesnt highlight it correctly

or so it seems to me

Forget it, I used the example from the library importing Prism and it worked source: npmjs/package/react-syntax-highlighter