Converting circular structure to JSON (webpack + apexcharts) - vue.js

Question

I'm getting this error on yarn serve:
WAIT Compiling... 11:14:16 AM
98% after emitting
ERROR Failed to compile with 1 error 11:15:03 AM
error
Converting circular structure to JSON
--> starting at object with constructor 'NormalModule'
| property 'dependencies' -> object with constructor 'Array'
| index 0 -> object with constructor 'HarmonyCompatibilityDependency'
--- property 'originModule' closes the circle
(this error happens while yarn is still open - not a full crash)
Or somethimes yarn crashes entirely with :
90% additional chunk assets processing HotModuleReplacementPluginC:\PATH\TO\MY\PROJECT\client\node_modules\webpack\lib\ModuleTemplate.js:85
throw e;
^
TypeError: C:\PATH\TO\MY\PROJECT\client\node_modules\cache-loader\dist\cjs.js??ref--13-0!C:\PATH\TO\MY\PROJECT\client\node_modules\babel-loader\lib\index.js!C:\PATH\TO\MY\PROJECT\client\node_modules\eslint-loader\index.js??ref--14-0!C:\PATH\TO\MY\PROJECT\client\src\js\routes\models\virtuals\index.js
Converting circular structure to JSON
--> starting at object with constructor 'NormalModule'
| property 'dependencies' -> object with constructor 'Array'
| index 0 -> object with constructor 'HarmonyCompatibilityDependency'
--- property 'originModule' closes the circle
at JSON.stringify (<anonymous>)
at requireChunkId (C:\PATH\TO\MY\PROJECT\client\node_modules\webpack\lib\RuntimeTemplate.js:320:35)
at Array.map (<anonymous>)
at RuntimeTemplate.blockPromise (C:\PATH\TO\MY\PROJECT\client\node_modules\webpack\lib\RuntimeTemplate.js:322:6)
at RuntimeTemplate.moduleNamespacePromise (C:\PATH\TO\MY\PROJECT\client\node_modules\webpack\lib\RuntimeTemplate.js:136:24)
at ImportDependencyTemplate.apply (C:\PATH\TO\MY\PROJECT\client\node_modules\webpack\lib\dependencies\ImportDependency.js:22:27)
at JavascriptGenerator.sourceDependency (C:\PATH\TO\MY\PROJECT\client\node_modules\webpack\lib\JavascriptGenerator.js:151:12)
at JavascriptGenerator.sourceBlock (C:\PATH\TO\MY\PROJECT\client\node_modules\webpack\lib\JavascriptGenerator.js:44:9)
at JavascriptGenerator.sourceBlock (C:\PATH\TO\MY\PROJECT\client\node_modules\webpack\lib\JavascriptGenerator.js:133:9)
at JavascriptGenerator.generate (C:\PATH\TO\MY\PROJECT\client\node_modules\webpack\lib\JavascriptGenerator.js:23:8)
at NormalModule.source (C:\PATH\TO\MY\PROJECT\client\node_modules\webpack\lib\NormalModule.js:522:33)
at ModuleTemplate.render (C:\PATH\TO\MY\PROJECT\client\node_modules\webpack\lib\ModuleTemplate.js:54:32)
at C:\PATH\TO\MY\PROJECT\client\node_modules\webpack\lib\Template.js:233:28
at Array.map (<anonymous>)
at Function.renderChunkModules (C:\PATH\TO\MY\PROJECT\client\node_modules\webpack\lib\Template.js:230:30)
at HotUpdateChunkTemplate.render (C:\PATH\TO\MY\PROJECT\client\node_modules\webpack\lib\HotUpdateChunkTemplate.js:48:34)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Context
I have one web application, SPA(laravel-enso), Laravel + VueJs.
In GIT in the develop branch, we do not have apexcharts installed and integrated. Another branch called upgrade has apexcharts installed:
client/package.json
"serve": "vue-cli-service serve --port 8082 --mode development",
"build": "vue-cli-service build --no-clean",
...
"dependencies": {
"apexcharts": "^3.35.0",
...
"vue3-apexcharts": "^1.4.1",
}
...
In the upgrade branch I have one vue component called RrdGraph that makes use of apexcharts :
import VueApexCharts from "vue3-apexcharts";
export default {
name: 'RrdGraph',
components: {
apexchart: VueApexCharts,
},
...
connectionSeries: [
{
name: "Current",
data: [],
},
{
name: "Total",
data: [],
},
{
name: "Request",
data: [],
},
],
connectionChartOptions: {
chart: {
id: 'connectionChart',
group: 'network',
width: 800,
background: '#fff',
// zoom: {
// autoScaleYaxis: false, //not supported on multi-axis
// },
animations: {
enabled: false,
},
stacked: false,
},
dataLabels: {
enabled: false,
},
plotOptions: {
bar: {
columnWidth: '30%',
rangeBarOverlap: false,
},
},
markers: {
size: 0,
style: 'hollow',
colors: [
'#00af00', //Current / 0
'#0022ff', //New (Total) / 1
'#000000', //Request / 4
],
},
stroke: {
width: [3, 3, 2],
colors: [
'#00af00', //Current / 0
'#0022ff', //New (Total) / 1
'#000000', //Request / 4
],
// lineCap: 'square',
curve: 'straight', //'smooth', 'straight', 'stepline'
},
fill: {
opacity: 1,
},
xaxis: {
type: 'datetime',
min: new Date(Date.now()).getTime() - 31536000, //1 year
tickAmount: 10,
},
yaxis:
[
{
seriesName: 'Current',
showAlways: true,
axisTicks: {
show: true,
},
axisBorder: {
show: true,
color: '#0000FF',
},
labels: {
show: true,
style: {
colors: '#0000FF',
},
},
markers: {
colors: '#0000FF',
},
title: {
text: "Current & Total",
style: {
color: '#0000FF',
},
},
type: 'numeric',
decimalsInFloat: 1,
tickAmount: 10,
},
{
seriesName: 'Current',
showAlways: true,
axisTicks: {
show: false,
},
axisBorder: {
show: false,
},
labels: {
show: false,
},
type: 'numeric',
decimalsInFloat: 1,
tickAmount: 10,
},
{
seriesName: 'Request',
showAlways: true,
opposite: false,
axisTicks: {
show: true,
},
axisBorder: {
show: true,
color: '#000000',
},
labels: {
show: true,
style: {
colors: '#000000',
},
},
title: {
text: "Request (per 5 min)",
style: {
color: '#000000',
},
},
type: 'numeric',
decimalsInFloat: 1,
tickAmount: 10,
},
],
tooltip: {
x: {
format: 'dd MMM yyyy HH:mm:ss',
},
// followCursor: true,
// fixed: {
// enabled: true,
// position: 'topRight',
// offsetX: 5,
// offsetY: 25,
// },
},
legend: {
horizontalAlign: 'center',
fontSize: '12px',
offsetX: -100,
offsetY: 5,
},
colors: [
'#00af00', //Current / 0
'#0022ff', //Total / 1
'#000000', //Request / 4
],
},
Initially I looked at this error as a very generic one, and I looked into package.json dependencies and devDependencies and if there are circular references. But I saw no issues with the dependencies of either apexcharts or vue3-apexcharts.
I've also observer that yarn build was working and only yarn serve was not. Looking deeper into what build and serve were doing, I saw that the --mode development was generating the error - since if I added --mode development to yarn build params it was crashing.
One important fact, that made me think this is related to apexcharts was that on the develop branch (the one that did not have apexcharts installed) yarn serve was not generating this error. And these 3 things were the only differences (RrdGraph compoenent and the 2 dependencies, apexcharts and vue3-apexcharts)
I started a long process of divide and conquer by removing bits and pieces from my RrdGraph component that used apexcharts.
I removed and removed, each time checking what part of the code was generating the error, and which removed part was not generating the error.
I reached this part:
plotOptions: {
bar: {
horizontal: false,
borderRadius: 0,
columnWidth: '30%',
// barHeight: '50%',
distributed: false,
rangeBarOverlap: false,
rangeBarGroupRows: false,
},
},
If I removed this part. Yarn was working again, no errors!
I tried to associated this with something and thought that if I remove the lines with bar options that are default values anyways, it is working - like this:
plotOptions: {
bar: {
columnWidth: '30%',
rangeBarOverlap: false,
},
},
(these being the only actual changes that we wanted that are not default values)
I thought that was it, since it was working again.
But then, the next one hit me harder:
We changed some comments in these options, so instead of //Total / 1 we changed it to //New (Total) / 1:
markers: {
size: 0,
style: 'hollow',
colors: [
'#00af00', //Current / 0
'#0022ff', //New (Total) / 1
'#000000', //Request / 4
],
},
stroke: {
width: [3, 3, 2],
colors: [
'#00af00', //Current / 0
'#0022ff', //New (Total) / 1
'#000000', //Request / 4
],
This made yarn serve crash again :(
Interestingly, it was only the first comment within markers, not the one within stroke that made it crash.
Conclusions:
I have no idea what is happening and why it behaves like this.
It might be also something related to webpack and what it converts these options to JSON.
It might be something related to how the options are passed to the component or, how this is converted to JSON in the --mode development, but something is strange
I'm wondering if someone had this issue or could share some hints.