Currently facing issues with setting up plotly.js in my nuxt project. Despite trying various approaches, I keep encountering the error message self is not defined. Installing both plotly.js and plotly.js-dist did not resolve the issue.
My attempt to create a custom build through nuxt plugins also ended in failure:
// Custom partial bundle setup
import plotly from 'plotly.js/lib/core';
import barpolar from 'plotly.js/lib/barpolar';
export default function (_, inject) {
plotly.register([barpolar]);
inject('plotly', plotly);
}
Even without pursuing the custom bundle route and opting for the dist lib, the same error persists. Manually importing and configuring also proved unsuccessful.
I followed the recommendation to add ify-loader as specified here: https://github.com/plotly/plotly-webpack
In my nuxt.config.js, the webpack plugin settings are as follows:
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',
],
});
},
},
Despite these efforts, the issue remains unresolved. It appears to be a compatibility issue between webpack 5 and plotly.js in the default setup. Any assistance on how to tackle this would be greatly appreciated.
Thank you for your help.