node.js - NextJS - 意外的令牌导入
问题描述
在将 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>
...
运行 npm run 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";
并从组件中删除 style 属性可以修复所有问题,但使用默认的 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 并且问题保持不变。
任何帮助将非常感激!
解决方案
推荐阅读
- php - 使用 XAMPP 在 Windows 10 中安装 go-pear.phar 时出错
- vue.js - 如何在 Nuxt JS 中将变量值从“页面”传递到“布局”?
- java - 尝试在 QT 项目中调用 Java 代码时找不到类异常
- apache-kafka-streams - 使用 Kafka Streams 分配多个主题的消费者
- node.js - VSCode Task 运行各种节点命令
- python - python中的CSV标头
- reactjs - 使用 mobx 获取数据进入无限循环
- c# - EF Core:无法跟踪实体类型的实例,因为另一个实例具有相同的键值
- javascript - 第 530 行的错误 1062 (23000):重复条目 '20190617051131-apply-schema.js' 用于键 'PRIMARY'
- laravel - Laravel 附加在关联键上