NextJS - 意外的令牌导入

Question

在将 react-syntax-highlighter 集成到我的 next-js 项目中时，我使用了以下代码：

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>

...

我在运行ning npm 运行 dev 时收到以下错误，但前提是我直接运行页面。

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)

如果我通过另一个页面导航到该页面，则一切正常。如果我随后刷新页面，则会出现错误。

删除行

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

并从组件中删除样式属性修复了所有问题，但使用默认的棱镜样式，这不是预期的结果。

环顾四周，我发现人们有 相似的 问题，修复可能与 next.js.config 文件有关，以及 css 文件正在服务器端加载，但我不是 100% 在那里做什么。

假设 next.js.config 文件是解决方案的一部分，这里是当前的内容。

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;
    }
  })
);

我试过使用和不使用 withCSS，问题还是一样。

如有任何帮助，我们将不胜感激！

Answer 1

翻找了一段时间后，我查看了 npm packages 目录，发现有两种类型的 dists：cjs & esm。简单的修复方法就是使用 cjs dist 而不是 esm dist.

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

希望这对您有所帮助:)

NextJS - 意外的令牌导入

NextJS - Unexpected Token Import

node.js

webpack

next.js