CODEWITHSUNDEEP
javascriptnode.jsreactjsnext.js
Mintee
Mintee

Reputation: 855

SyntaxError: Unexpected token 'export' in Next.js

When I render the code below I get this error:

SyntaxError: Unexpected token 'export'

(project path)/node_modules/react-syntax-highlighter/dist/esm/styles/prism/index.js

It initially works as intended until I refresh the page.

import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { oneLight } from "react-syntax-highlighter/dist/esm/styles/prism";

const codeString = '(num) => num + 1';

const Code = () => {
  return (
    <div>
      <SyntaxHighlighter language="javascript" style={oneLight}>
        {codeString}
      </SyntaxHighlighter>
    </div>
  );
};

export default Code;

Upvotes: 5

Views: 2350

Answers (1)

Mintee
Mintee

Reputation: 855

Solution for Unexpected token 'export' in Next.js when using react-syntax-highlighter

Use this import path:

react-syntax-highlighter/dist/cjs/...

instead of:

react-syntax-highlighter/dist/esm/...

Upvotes: 16

Related Questions