react-syntax-highlighter: SyntaxError: Unexpected token export when using NextJS

Describe the bug Error appears when I trying to import any react-syntax-highlighter styles in NextJS app.

To Reproduce Steps to reproduce the behavior:

Create NextJS app using ‘create-next-app’
Import any react-syntax-highlighter style.

Expected behavior Working Syntax Highlight.

Desktop (please complete the following information):

OS: ArchLinux
Browser: Chrome
Version: 77

Additional context Full error message:

Unexpected token export
/home/vista1nik/Documents/es-snippets/node_modules/react-syntax-highlighter/dist/esm/styles/hljs/index.js:1
export { default as a11yDark } from './a11y-dark';
^^^^^^

SyntaxError: Unexpected token export
    at Module._compile (internal/modules/cjs/loader.js:718:23)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:785:10)
    at Module.load (internal/modules/cjs/loader.js:641:32)
    at Function.Module._load (internal/modules/cjs/loader.js:556:12)
    at Module.require (internal/modules/cjs/loader.js:681:19)
    at require (internal/modules/cjs/helpers.js:16:16)
    at Object.react-syntax-highlighter/dist/esm/styles/hljs (/home/vista1nik/Documents/es-snippets/.next/server/static/development/pages/index.js:2563:18)
    at __webpack_require__ (/home/vista1nik/Documents/es-snippets/.next/server/static/development/pages/index.js:23:31)
    at Module../pages/index.js (/home/vista1nik/Documents/es-snippets/.next/server/static/development/pages/index.js:2156:104)
    at __webpack_require__ (/home/vista1nik/Documents/es-snippets/.next/server/static/development/pages/index.js:23:31)
    at Object.4 (/home/vista1nik/Documents/es-snippets/.next/server/static/development/pages/index.js:2320:18)
    at __webpack_require__ (/home/vista1nik/Documents/es-snippets/.next/server/static/development/pages/index.js:23:31)
    at /home/vista1nik/Documents/es-snippets/.next/server/static/development/pages/index.js:91:18
    at Object.<anonymous> (/home/vista1nik/Documents/es-snippets/.next/server/static/development/pages/index.js:94:10)
    at Module._compile (internal/modules/cjs/loader.js:774:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:785:10)

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 94
Comments: 32

Commits related to this issue

Fix import because of react-syntax-highlighter#230 — committed to AbhyudayaSharma/abhyudayasharma.github.io by AbhyudayaSharma 4 years ago
fixed react-syntax-highlighter with Nextjs bug: https://github.com/react-syntax-highlighter/react-syntax-highlighter/issues/230 — committed to matteo1222/resurface by matteo1222 2 years ago
Fix code block issue with import (https://github.com/react-syntax-highlighter/react-syntax-highlighter/issues/230) — committed to guillermodlpa/site by guillermodlpa 2 years ago
Add code syntax highlight ref: - https://github.com/react-syntax-highlighter/react-syntax-highlighter/issues/230 - https://github.com/react-syntax-highlighter/react-syntax-highlighter/issues/479 — committed to chengr4/my-blog by chengr4 a year ago
Import syntax highlights from cjs instead of esm directory Fixes jest syntax errors See https://github.com/react-syntax-highlighter/react-syntax-highlighter/issues/230#issuecomment-568377353 — committed to SamCarlberg/robotbuilder-2 by SamCarlberg 8 months ago

Most upvoted comments

you’re welcome @zemuldo!

Actually I found a better solution. You just need to use cjs module.

react-syntax-highlighter/dist/cjs/... instead of: react-syntax-highlighter/dist/esm/...

And you won’t have to use next-transpile-modules.

+1025

sidujjain on Dec 23, 2019

you can fix the issue using next-transpile-modules but it doesn’t seem to do tree-shaking.

Something like this in next.config.js:

const withTM = require("next-transpile-modules");
const withPlugins = require("next-compose-plugins");

module.exports = withPlugins(
  [
    [
      withTM,
      {
        transpileModules: [
          "react-syntax-highlighter",
        ]
      }
    ],
    ...

+16

sidujjain on Dec 18, 2019

this works for me…after loads of trial and error

preshonyee on Jul 26, 2020

This worked for me! Thanks for sharing!

matiasherranz on Sep 11, 2020

Hi friends, I had the same problem and our friend @sidujjain solved the problem, but the whole package size will be added to your component. To solve this problem, use this: import dark from “react-syntax-highlighter / dist / cjs / styles / prism / dark”; Instead of using this: import {dark} from "react-syntax-highlighter / dist / cjs / styles / prism ";

masoudjapalaghi on May 22, 2022

Not all heroes wear capes

mikhaelesa on Mar 15, 2021

Man you deserve something, thanks a lot

faustinozanetto on Mar 5, 2021

It didn’t work for me.

SalahAdDin on Jul 13, 2020

Worked a charm, thank you

AidanLDev on Aug 28, 2022

This works but at cost of bundle size 💀

SujalShah3234 on May 10, 2022

@padunk - I’ve submitted a PR to update the README.

kimbaudi on Sep 2, 2021

Full working solution

import React from "react";

import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import d from "react-syntax-highlighter/dist/cjs/styles/prism/nord";

const CodeBlock = {
  code({ node, inline, className, children, ...props }) {
    const match = /language-(\w+)/.exec(className || "");
    return !inline && match ? (
      <SyntaxHighlighter
        style={d}
        language={'javascript'}
        PreTag="div"
        showLineNumbers={true}
        customStyle={{ margin: 0, padding: ".8rem" }} 
        {...props}
      >
        {String(children).replace(/\n$/, "")}
      </SyntaxHighlighter>
    ) : (
      <code className={className} {...props}>
        {children}
      </code>
    );
  },
};

export default CodeBlock;

Schachte on Oct 9, 2022

Thanks It worked for me.

Nightvision53 on Mar 26, 2022

Thanks for the solution. Can we update and add this on the docs please? Thanks.

padunk on Aug 19, 2021

Thank you so much @sidujjain it worked ! 😍

DumasOlivier on Apr 2, 2021

Try to access from node_modules. It’s worked on NextJs project! for example : /node_modules/react-syntax-highlighter/dist/esm/styles/prism';

MuhammadMinhaj on May 7, 2021