Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

NextJS - Unexpected Token Import

While integrating react-syntax-highlighter into my next-js project I've used the following code:

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

...

<SyntaxHighlighter language="jsx" style={okaidia}>
{some code goes here}
</SyntaxHighlighter>

...

I get the following error upon running npm run dev, but only if I run the page directly.

Unexpected token export
/Users/johndetlefs/repos/tal-gel-framework/node_modules/react-syntax-highlighter/dist/esm/styles/prism/index.js:1
(function (exports, require, module, __filename, __dirname) { export { default as coy } from './coy';
                                                              ^^^^^^

SyntaxError: Unexpected token export
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:617:28)
    at Object.Module._extensions..js (module.js:664:10)
    at Module.load (module.js:566:32)
    at tryModuleLoad (module.js:506:12)
    at Function.Module._load (module.js:498:3)
    at Module.require (module.js:597:17)
    at require (internal/module.js:11:18)
    at Object.react-syntax-highlighter/dist/esm/styles/prism (/Users/johndetlefs/repos/tal-gel-framework/.next/server/static/development/pages/components.js:7242:18)
    at __webpack_require__ (/Users/johndetlefs/repos/tal-gel-framework/.next/server/static/development/pages/components.js:23:31)
    at Module../pages/components.js (/Users/johndetlefs/repos/tal-gel-framework/.next/server/static/development/pages/components.js:6839:104)
    at __webpack_require__ (/Users/johndetlefs/repos/tal-gel-framework/.next/server/static/development/pages/components.js:23:31)
    at Object.3 (/Users/johndetlefs/repos/tal-gel-framework/.next/server/static/development/pages/components.js:7175:18)
    at __webpack_require__ (/Users/johndetlefs/repos/tal-gel-framework/.next/server/static/development/pages/components.js:23:31)
    at module.exports../js/config/libs/_theme-foundation--colors.js.config.themes.list.name (/Users/johndetlefs/repos/tal-gel-framework/.next/server/static/development/pages/components.js:91:18)

If I navigate to the page via another page then everything works great. If I then refresh the page I get the error.

Removing the line

import { okaidia } from "react-syntax-highlighter/dist/esm/styles/prism";

and removing the style attribute from the component fixes everything, but uses the default prism style, which is not the desired outcome.

Looking around I can see people have similar issues, and that the fix probably has something to do with the next.js.config file, and how the css file is being loaded server-side, but I'm not 100% what to do there.

Assuming the next.js.config file is a part of the solution, here are the current contents.

const withSass = require("@zeit/next-sass");
const withCSS = require("@zeit/next-css");

module.exports = withCSS(
  withSass({
    webpack(config) {
      config.module.rules.push({
        test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
        use: {
          loader: "url-loader",
          options: {
            limit: 100000
          }
        }
      });
      config.module.rules.push({
        test: /\.svg$/,
        use: ["@svgr/webpack"]
      });
      return config;
    }
  })
);

I've tried both with & without withCSS and the issue stays the same.

Any help would be much appreciated! 👍

like image 693
John Detlefs Avatar asked Nov 21 '19 03:11

John Detlefs


People also ask

Does Nextjs have plugins?

Next. js does have plugins that plug into the webpack config (like @next/mdx ).

Is Nextjs front end?

Next. js, a frontend JavaSript framework that builds upon React's UI library, aims to reduce JavaScript fatigue by enabling developers to build web applications in a zero-config environment that provides all the tools they need out-of-the-box.

Where can I use Nextjs?

Next.js is a React framework that gives you building blocks to create web applications. By framework, we mean Next.js handles the tooling and configuration needed for React, and provides additional structure, features, and optimizations for your application.


1 Answers

After digging around for a while, I checked out the npm packages directory and found that there are two types of dists: cjs & esm. The simple fix is just using the cjs dist instead of the esm dist.

import { darcula } from 'react-syntax-highlighter/dist/cjs/styles/prism';

image

Hope this helps :)

like image 61
Rotinx Avatar answered Sep 20 '22 17:09

Rotinx