Converting circular structure to JSON

[robbykrlos]

Hi,

I'm getting this error on yarn serve (while yarn is still processing...):

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

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 project, SPA(laravel-enso), VueJs. In the develop branch, we do not have apexcharts installed and integrated. in the upgrade branch we have apexcharts installed:
client/package.json

...
"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 the error was very generic and I looked into package.json dependencies 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 the only difference that was generating the error.

One important fact, that made me think this is related to apexcharts was that on the develop branch yarn serve was not generating this error.

I started a long process of divide et impera (divide and conquer) by removing bits 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, no errors.
I figured 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.

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.

Conclusion: I have no idea what is happening and why it behaves like this.
It might be also something related to webpack.
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 and am wondering if someone had this issue or could give me some clues...

[robbykrlos]

PS: I've opened a question on stackoverflow too: https://stackoverflow.com/questions/73388144/converting-circular-structure-to-json-webpack-apexcharts