SyntaxError: Unexpected token export when using NextJS #230

Vista1nik · 2019-12-13T15:30:37Z

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)

The text was updated successfully, but these errors were encountered:

iwmitt · 2019-12-14T05:22:35Z

Getting the same issue

malithmcr · 2019-12-15T14:07:35Z

I'm having the same issue.

conorhastings · 2019-12-15T17:45:18Z

@malithmcr @scottsgcho @Vista1nik do any of you have a repo with the error

sidujjain · 2019-12-18T07:48:33Z

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",
        ]
      }
    ],
    ...

zemuldo · 2019-12-21T16:31:33Z

@sidujjain Following your advice and https://www.npmjs.com/package/next-transpile-modules docs helped. Thanks!

sidujjain · 2019-12-23T06:52:59Z

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.

SalahAdDin · 2020-07-13T17:39:08Z

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.

It didn't work for me.

preshonyee · 2020-07-26T14:13:21Z

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.

this works for me...after loads of trial and error

matiasherranz · 2020-09-11T21:05:02Z

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.

This worked for me! Thanks for sharing!

TheSecMaven · 2020-10-30T03:34:43Z

huge save, worked for me #opensource for the win

f3ve · 2020-12-20T05:08:48Z

@SalahAdDin Thanks for the simple fix!

faustinozanetto · 2021-03-05T14:57:32Z

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.

Man you deserve something, thanks a lot

mikhaelesa · 2021-03-15T15:25:26Z

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.

Not all heroes wear capes

MuhammadMinhaj · 2021-03-31T18:02:55Z

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

DumasOlivier · 2021-04-02T01:57:00Z

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.

Thank you so much @sidujjain it worked ! 😍

padunk · 2021-08-19T04:33:16Z

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.

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

kimbaudi · 2021-09-02T23:42:12Z

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

cazterk · 2021-11-27T13:40:36Z

awesome awesome awesome 👍🏼👍🏼👌🏼🤜🏼🤛🏼

ooys · 2022-02-04T03:05:04Z

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.

Works for me! Thank you for this solution!

yourcasualdev · 2022-03-26T15:50:48Z

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.

Thanks It worked for me.

SujalShah3234 · 2022-05-10T04:50:23Z

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.

This works but at cost of bundle size 💀

masoudjapalaghi · 2022-05-22T16:54:26Z

sidujjain

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 ";

…ter/react-syntax-highlighter#230

…ax-highlighter#230)

AidanLDev · 2022-08-28T17:01:47Z

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.

Worked a charm, thank you

kingRayhan · 2022-09-14T19:13:21Z

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.

This worked for me! Thanks for sharing!

You saved my life

xylvnking · 2022-09-17T22:33:09Z

sidujjain

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 ";

This fixed it for me!

Schachte · 2022-10-09T04:03:08Z

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;

thesatishjassal · 2022-12-17T12:03:25Z

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

path fixing true thnx.

zesertebe · 2023-01-04T15:58:58Z

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.

You are the best. You saved my life. Whenever you want I'll buy you a beer or whatever you want.

dnldmp · 2023-01-22T02:00:06Z

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.

Thank you it help me a lot :D

at-the-vr · 2023-02-14T17:27:57Z

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.

thanks a lot, helped me a lot for this OS project

AgustinLaValla · 2023-03-04T16:34:00Z

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.

It didn't work for me.

Nice solution!

ref: - react-syntax-highlighter/react-syntax-highlighter#230 - react-syntax-highlighter/react-syntax-highlighter#479

masonictemple4 · 2023-08-19T07:13:52Z

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.

A couple years late, and this still worked! Thanks for sharing 🙏

Fixes jest syntax errors See react-syntax-highlighter/react-syntax-highlighter#230 (comment)

react-syntax-highlighter/react-syntax-highlighter#230

AbhyudayaSharma referenced this issue in AbhyudayaSharma/abhyudayasharma.github.io Apr 14, 2020

Fix import because of react-syntax-highlighter#230

3926889

Vista1nik closed this as completed Jul 13, 2020

LabEG mentioned this issue Dec 6, 2020

Problems on build time LabEG/first-di#1

Closed

hodgef mentioned this issue Jan 9, 2021

how I can add japanese hodgef/react-simple-keyboard#972

Closed

benw-pusher mentioned this issue Jan 28, 2021

SyntaxError: Unexpected token 'export' pusher/push-notifications-web#78

Closed

nrempel mentioned this issue Jun 3, 2021

Importing syntax highlighting paths from ES Module fails #393

Open

kimbaudi mentioned this issue Sep 2, 2021

update readme. fix documentation for syntax highlighting remarkjs/react-markdown#645

Closed

5 tasks

tlamadon mentioned this issue Dec 30, 2021

Unexpected token 'export' when used in NextJs #440

Open

matteo1222 added a commit to matteo1222/resurface that referenced this issue Jun 8, 2022

fixed react-syntax-highlighter with Nextjs bug: react-syntax-highligh…

c67f6d5

…ter/react-syntax-highlighter#230

guillermodlpa added a commit to guillermodlpa/site that referenced this issue Jul 24, 2022

Fix code block issue with import (react-syntax-highlighter/react-synt…

d335fac

…ax-highlighter#230)

nstapelbroek mentioned this issue Nov 2, 2022

only one-light style Unexpected token 'export' when used in NextJs #490

Open

chengr4 added a commit to chengr4/my-blog that referenced this issue Apr 6, 2023

Add code syntax highlight

749a462

ref: - react-syntax-highlighter/react-syntax-highlighter#230 - react-syntax-highlighter/react-syntax-highlighter#479

dak2 mentioned this issue Aug 11, 2023

記事内容 dak2/kdevlog#37

Open

SamCarlberg added a commit to SamCarlberg/robotbuilder-2 that referenced this issue Feb 29, 2024

Import syntax highlights from cjs instead of esm directory

9b72793

Fixes jest syntax errors See react-syntax-highlighter/react-syntax-highlighter#230 (comment)

LeandroJavierLaino mentioned this issue Mar 5, 2024

Unexpected token 'export' #543

Open

anthony0030 added a commit to pvoznyuk/react-live-clock that referenced this issue May 31, 2024

Fixes problem with react-syntax-highlighter

a7ed263

react-syntax-highlighter/react-syntax-highlighter#230

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

SyntaxError: Unexpected token export when using NextJS #230

SyntaxError: Unexpected token export when using NextJS #230

Vista1nik commented Dec 13, 2019

iwmitt commented Dec 14, 2019

malithmcr commented Dec 15, 2019

conorhastings commented Dec 15, 2019

sidujjain commented Dec 18, 2019

zemuldo commented Dec 21, 2019

sidujjain commented Dec 23, 2019

SalahAdDin commented Jul 13, 2020

preshonyee commented Jul 26, 2020

matiasherranz commented Sep 11, 2020

TheSecMaven commented Oct 30, 2020

f3ve commented Dec 20, 2020

faustinozanetto commented Mar 5, 2021

mikhaelesa commented Mar 15, 2021

MuhammadMinhaj commented Mar 31, 2021 •

edited

Loading

DumasOlivier commented Apr 2, 2021

padunk commented Aug 19, 2021

kimbaudi commented Sep 2, 2021

cazterk commented Nov 27, 2021 •

edited

Loading

ooys commented Feb 4, 2022

yourcasualdev commented Mar 26, 2022

SujalShah3234 commented May 10, 2022

masoudjapalaghi commented May 22, 2022 •

edited

Loading

AidanLDev commented Aug 28, 2022

kingRayhan commented Sep 14, 2022

xylvnking commented Sep 17, 2022

Schachte commented Oct 9, 2022 •

edited

Loading

thesatishjassal commented Dec 17, 2022 •

edited

Loading

zesertebe commented Jan 4, 2023

dnldmp commented Jan 22, 2023

at-the-vr commented Feb 14, 2023

AgustinLaValla commented Mar 4, 2023

masonictemple4 commented Aug 19, 2023

SyntaxError: Unexpected token export when using NextJS #230

SyntaxError: Unexpected token export when using NextJS #230

Comments

Vista1nik commented Dec 13, 2019

iwmitt commented Dec 14, 2019

malithmcr commented Dec 15, 2019

conorhastings commented Dec 15, 2019

sidujjain commented Dec 18, 2019

zemuldo commented Dec 21, 2019

sidujjain commented Dec 23, 2019

SalahAdDin commented Jul 13, 2020

preshonyee commented Jul 26, 2020

matiasherranz commented Sep 11, 2020

TheSecMaven commented Oct 30, 2020

f3ve commented Dec 20, 2020

faustinozanetto commented Mar 5, 2021

mikhaelesa commented Mar 15, 2021

MuhammadMinhaj commented Mar 31, 2021 • edited Loading

DumasOlivier commented Apr 2, 2021

padunk commented Aug 19, 2021

kimbaudi commented Sep 2, 2021

cazterk commented Nov 27, 2021 • edited Loading

ooys commented Feb 4, 2022

yourcasualdev commented Mar 26, 2022

SujalShah3234 commented May 10, 2022

masoudjapalaghi commented May 22, 2022 • edited Loading

AidanLDev commented Aug 28, 2022

kingRayhan commented Sep 14, 2022

xylvnking commented Sep 17, 2022

Schachte commented Oct 9, 2022 • edited Loading

thesatishjassal commented Dec 17, 2022 • edited Loading

zesertebe commented Jan 4, 2023

dnldmp commented Jan 22, 2023

at-the-vr commented Feb 14, 2023

AgustinLaValla commented Mar 4, 2023

masonictemple4 commented Aug 19, 2023

MuhammadMinhaj commented Mar 31, 2021 •

edited

Loading

cazterk commented Nov 27, 2021 •

edited

Loading

masoudjapalaghi commented May 22, 2022 •

edited

Loading

Schachte commented Oct 9, 2022 •

edited

Loading

thesatishjassal commented Dec 17, 2022 •

edited

Loading