如何在nuxt SSR中设置plotly.js？
如何在nuxt SSR中设置plotly.js？
提问于 2021-08-06 14:25:56
我正在尝试在nuxt中设置plotly.js，但是无论我做什么，我都会得到这个神秘的错误
self is not defined
我试图安装plotly.js和plotly.js-dist，同样的错误显示。
我更喜欢定制构建，所以我试着在nuxt插件中这样做：
// here we use custom partial bundle
import plotly from 'plotly.js/lib/core';
import barpolar from 'plotly.js/lib/barpolar';
export default function (_, inject) {
plotly.register([barpolar]);
inject('plotly', plotly);
}但每当我注册nuxt插件时，网站就会崩溃，并出现上述错误。即使不使用自定义捆绑包路径，使用dist lib仍然会失败。
我也试着不使用nuxt插件系统，而是手动导入和设置，同样的事情也会发生。
我还添加了这里推荐的ify-loader：https://github.com/plotly/plotly-webpack
这是我关于webpack插件的nuxt.config.js：
build: {
extend(config, { isClient }) {
console.log('config :>> ', config);
config.module.rules.push({
test: /\.js$/,
use: [
'ify-loader',
'transform-loader?plotly.js/tasks/compress_attributes.js',
],
});
},
},还是不走运。
我假设这是问题的webpack 5和plotly.js不能很好地在默认设置，但我不知道如何解决这个问题。
感谢你的帮助。
回答 1
Stack Overflow用户
发布于 2021-08-06 14:55:42
这不起作用的原因是，密谋地试图访问文档，而在SSR中，这显然会失败。
因此，为了解决这个问题，我只需在仅客户端模式下分配插件，如下所示：
plugins: [
// other plugins
{ src: '~/plugins/plotly', mode: 'client' },
],而且它起作用了。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68683251
复制相关文章
相似问题
腾讯云开发者
