SyntaxError: Unexpected token 'export' in Next.js

Question

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;

Mintee · Accepted Answer · 2022-08-13 19:11:47Z

16

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/...

answered Aug 13, 2022 at 19:11

Mintee

8751 gold badge16 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Aayush Goyal Over a year ago

I understood this has to do with CommonJS and ES Modules but why only react-syntax-highlighter is throwing errors? Are any settings to be toggled inside Next.js or is it just the package thing?

Collectives™ on Stack Overflow

SyntaxError: Unexpected token 'export' in Next.js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related