如何在下一个SSR中建立plot .js ?

Question

我试图在next中设置plot .js但无论我做什么，我都会得到这个神秘的错误

self is not defined

我试图安装plotly.js和plotly.js-dist相同的错误显示。

我更喜欢自定义构建，所以我在下一个插件中尝试这样做:

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

，但每当我注册下一个插件网站崩溃与上述错误。即使不使用自定义包路径，使用dist lib仍然会失败。

我也试着不使用next插件系统，而是手动导入和设置，同样的事情发生了。

我还添加了ify-loader推荐在这里:https://github.com/plotly/plotly-webpack

这是我的nuxt.config.js关于webpack插件:

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和plot .js在默认设置下不能很好地一起工作的问题，但我不知道如何解决这个问题。

帮助感激。

Answer 1

这不起作用的原因是阴谋试图访问文档，在SSR中这显然会失败。

所以为了解决这个问题，我只需要在客户端模式下分配插件，像这样:

plugins: [
// other plugins
{ src: '~/plugins/plotly', mode: 'client' },
],

并且成功了