Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

SyntaxError: Unexpected token export when using NextJS

See original GitHub issue

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)

Issue Analytics

State:
Created 4 years ago
Reactions:80
Comments:27

Top GitHub Comments

844reactions

sidujjaincommented, Dec 23, 2019

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.

13reactions

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